分析代码:
<script>
var str = "hello";
var re = str.fontcolor("red");
console.log(re,typeof re); //"<font color="red">hello</font> string"
</script>
分析:str是字符串,字符串能用点语法?
实际上是:字符串在用点语法时,会隐式为:var str = new String();(字符串字面量是var str = new String();的语法糖写法)变为一个字符串对象,然后对象调其原型链上的fontcolor()就是顺理成章。
同理:如果原型链上没有你所想要的方法,可以自己封装一个
eg:String.prototype.mytool = function(){ }
ES6中,字符串的原型链上新增了很多的方法:
1.子串识别类
ES6 之前判断字符串是否包含子串,用 indexOf 方法,ES6 新增了子串的识别方法
1.下面三个方法都可以接受两个参数,一:是需要搜索的字符串,二:是includes()和startsWith()可选的搜索起始位置索引,endsWith()是截段字符串下标的结束位置。若没写第二个参数,则默认从第一个字符下标0开始算起走。
01.includes():返回布尔值,判断是否找到参数字符串。
<script>
let string = "apple,banana,orange";
let s1 = string.includes("banana"); // true
let s2 = string.includes("banana",6); // true
let s3 = string.includes("banana",7); // false
console.log(s1,s2,s3);
</script>
02.startsWith():返回布尔值,判断参数字符串是否在原字符串的头部。
<script>
let string = "apple,banana,orange";
let m1 = string.startsWith("apple"); // true
let m2 = string.startsWith("apple",1); // false
console.log(m1,m2);
</script>
03.endsWith():返回布尔值,判断参数字符串是否在原字符串的尾部。
注意点:它的第二个参数是截段字符串下标的结束位置,也就是先把字符串截一段,第二个参数是所截字符串的最后一个字符的后面一个位置的位置。然后再看子串是否与所截字符串的尾部相同,相同返回true,不同返回false。若没有第二个参数,则默认是字符串的尾部。
<script>
let string = "apple,banana,orange";
let t1 = string.endsWith("ge"); // true
let t2 = string.endsWith("ge",5); // false
let t3 = string.endsWith("e,",5); // false
let t4 = string.endsWith("e,",6); // true
console.log(t1,t2,t3,t4);
</script>
注意点:
这三个方法只返回布尔值,如果需要知道子串的位置,还是得用 indexOf 和 lastIndexOf 。
这三个方法如果传入了正则表达式而不是字符串,会抛出错误。而 indexOf 和 lastIndexOf 这两个方法,它们会将正则表达式转换为字符串并搜索它。
2.字符串重复
repeat():返回新的字符串,表示将字符串重复指定次数后返回一个新字符串,不改变原字符串。
<script>
var str = "hello";
var s1 = str.repeat(2); //str字符串重复两次然后保存到s1中
console.log(s1);//"hellohello"
console.log(str);//"hello"
</script>
如果参数是小数,向下取整
<script>
var str = "hello";
var s3 = str.repeat(3.2);
var s4 = str.repeat(3.7);
console.log(s3,s4);//"hellohellohello" "hellohellohello"
</script>
特殊:如果参数是 0 至 -1 之间的小数,会进行取整运算,0 至 -1 之间的小数取整得到 -0 ,等同于 repeat 零次
<script>
var str = "hello";
var s2 = str.repeat(-0.5);
console.log(s2);//""
</script>
如果参数是 NaN,等同于 repeat 零次
<script>
var str = "hello";
var s5 = str.repeat(NaN);
console.log(s5);//""
</script>
如果参数是负数(不属于0到-1之间的负数)或者 Infinity ,会报错:
<script>
var str = "hello";
var s6 = str.repeat(Infinity); //Invalid count value
//at String.repeat
console.log(s6);
</script>
<script>
var str = "hello";
var s7 = str.repeat(-2.1); //Invalid count value
//at String.repeat
console.log(s7);
</script>
如果传入的参数是字符串,则会先将字符串转化为数字(只有全为数字符号的字符串/或者以恶小关键字(转为0)才可以转)
<script>
var str = "hello";
var s8 = str.repeat("null"); //""
console.log(s8);
var s9 = str.repeat("undefined");
console.log(s9); //""
var s10 = str.repeat("2");
console.log(s10);//"hellohello"
</script>
3. 字符串补全
以下两个方法接受两个参数,第一个参数是指定生成的字符串的最小长度,第二个参数是用来补全的字符串。如果没有指定第二个参数,默认用空格填充。
01.padStart():返回新的字符串,不改变原字符串,表示用参数字符串从头部(原字符串前面)补全原字符串。
02.padEnd():返回新的字符串,不改变原字符串,表示用参数字符串从尾部(原字符串后面)补全原字符串
<script>
var str = "h";
console.log(str.padStart(5,"o")); // "ooooh"
console.log(str.padEnd(5,"o")); // "hoooo"
//没有设置第二个参数,则默认为 空格
console.log(str.padStart(5)); // " h"
console.log(str); //"h"
</script>
如果指定的长度小于或等于原字符串的长度(length属性,不是下标),则返回原字符串:
<script>
var str = "hello";
console.log(str.padEnd(5,"o")); //"hello"
console.log(str.padStart(4,"o"));//"hello"
</script>
如果原字符串加上补全字符串长度大于指定长度,则截去超出位数的补全字符串:
<script>
var str = "hello"; //length=5
//补到length=10,补5位,而world!为6位,所以会截掉补全字符串的一部分
console.log(str.padEnd(10,"world!")); //"helloworld"
console.log(str.padStart(10,"world!")); //"worldhello"
</script>
注意点:一定是截去的补全字符串,且都是从补全字符串的尾部开始截。
常用于补全位数:
console.log("123".padStart(10,"0")); // "0000000123"
4.模板字符串(重要)
模板字符串相当于加强版的字符串,用反引号 ``,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
1.避免ES5中繁琐的字符串拼接
//ES5中
<script>
var age = 20;
var yourname = "www"
var str = '这个人的名字叫'+yourname+',今年'+age+'岁了';
console.log(str);//这个人的名字叫www,今年20岁了
</script>
ES6中:利用模板字符串
<script>
var age = 20;
var yourname = "www"
var str = `这个人的名字叫${yourname},今年${age}岁了`;
console.log(str);//这个人的名字叫www,今年20岁了
</script>
分析:字符串用反引号``引起来,变量放在 ${ }里面 ,就不用再进行字符串拼接了,毕竟,如果变量多了的话,字符串拼接起来很麻烦,且易错。
2.定义多行字符串
<script>
//普通字符串这样多行写就会报错
var str = "aaaaaaa
bbbbbbbbbbbbbbbb0";
</script>
<script>
//模板字符串这样多行写就不会报错
var str = `aaaaaaa
bbbbbbbbbbbbbbbb0`;
</script>
3.利用模板字符串调用函数
<script>
//字符串中调用函数
function f(){
return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2); // Game start,have fun!
</script>
5.标签模板
后面学习完再回来补充。。。