ES6中 字符串string新增的方法

分析代码：

<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.标签模板

后面学习完再回来补充。。。