勇宝趣学JavaScript ES6第三章（字符串的拓展）

已经写到系列教程的第三章了，本章节我们一起来探讨字符串的那些事。在我们的日常工作中，经常会用到模板字符串，还有一些字符串的方法，我们今天就来好好的品一品。

谢谢大家的点赞和收藏。

一、字符串的方法

说到字符串，我们就会自然而然的想到Unicode编码。像\u0061代表的是字母a，但是Unicode是有一个范围的（\u0000~\uFFFF）。在JavaScript中1个字符占用两个字节。如果在范围内就是一个字符，如果超出这个范围，JavaScript必须用2个字符来进行表示。

1.1 charAt和charCodeAt

1个字符占两个字节，我们可以使用charCodeAt打印出字符的Unicode编码，charAt是打印对应下标字符的值。

let str = 'iyongbao';

console.log(str.charCodeAt(0)); // 105
console.log(str.charAt(1)); // y

1.2 includes、startsWith、endsWith

三个方法的返回值均为boolean：

1. 试想一下在ES5中我们是怎么来判断字符串是否包含某一字符的？

   let str = 'iyongbao';
   
   console.log(str.indexOf('a') !== -1); // true
   console.log(str.indexOf('z') !== -1); // false

   这里我只写了一种，使用indexOf方法来判断，通过返回值来进行判断。如果找到返回对应下标，如果没找到则返回-1。

   ES6中为我们提供了includes方法来判断是否存在某一字符，返回值为boolean。

   let str = 'iyongbao';
   
   console.log(str.includes('a')); // true
   console.log(str.includes('z')); // false

2. 使用startWith/endsWith来判断是否以某一字符串开头/结尾。

   let str = 'Hello World!';
   
   console.log(str.startsWith('Hello')); // true
   console.log(str.endsWith('!')); // true

3. startWith/endsWith两个方法有第二个参数，表示从什么位置开始'截取'。

   let str = 'Hello World!';
   
   console.log(str.startsWith('World', 6)); // true
   console.log(str.endsWith('Hello', 5)); // true

   • startWith表示从下标6开始为起点一直到最后。
   • endsWith表示从下标5开始到字符串最开头。

1.3 repeat

1. repeat方法，顾名思义就是重复的意思。它可以使我们的字符串重复n次。

   let str = 'a'.repeat(3); 
   let str1 = 'a'.repeat(0);
   
   console.log(str); // aaa
   console.log(str1); // ''

2. 如果参数为小数，则会向下取整。

   let str = 'a'.repeat(6.6);
   
   console.log(str); // aaaaaa

3. 如果我们传入小于等于-1的负数或者是Infinity会报错，传入0~-1之间的小数，不报错。

   let str = 'a'.repeat(-0.8);
   let str1 = 'a'.repeat(-1.2);
   let str2 = 'a'.repeat(Infinity);
   
   console.log(str); // ''
   console.log(str1); // RangeError: Invalid count value: -1.2
   console.log(str2); // RangeError: Invalid count value: Infinity

1.4 padStart、padEnd

这两个方法的作用是补全，一般用的最多的就是时间补0。

let str = 'a';
let str1 = 'b';

console.log(str.padStart(5, 0)); // 0000a
console.log(str.padEnd(5, 0)); // a0000

两个方法的参数：第一个参数表示字符串的长度，第二个参数表示如果长度不够来补充的字符串。

二、模板字符串

模板字符串在我们的编码中经常用到，确实很方便相比我们之前ES5中的字符串拼接。

2.1 基本用法

1. 在之前如果我们想输出一些带变量的字符串可能我们需要像下边这样。

   let name = 'iyongbao';
   let age = 26;
   
   let str = '我叫' + name + ', 我今年' + age + '岁啦。'
   
   console.log(str); // 我叫iyongbao, 我今年26岁啦。

   可以看到这种写法很浪费时间和功夫，如果内容一多了，就会缺这少那的。

2. 使用ES6模板字符串会是怎样的呢？

   let name = 'iyongbao';
   let age = 26;
   
   let str = `我叫${name}, 我今年${age}岁啦。`
   
   console.log(str); // 我叫iyongbao, 我今年26岁啦。

   这样看着舒服多啦，我们使用两个反引号'`'，变量使用${变量名}。值得注意的是，如果在模板字符串中想要表示多行字符串，所有的空格和缩进换行都会被保留在输出中。

   let name = 'iyongbao';
   let age = 26;
   
   let str = `我叫${name},
   我今年${age}岁啦。`
   
   console.log(str);

2.2 ${}

1. 如果我们想在模板字符串中输入变量，需要使用${}，我们可以在${}书写任意的JavaScript表达式。

   let a = 1;
   let b = 2;
   
   let str = `a + b = ${ a + b}`;
   
   console.log(str); // a + b = 3

2. 还可以获取对象的属性值

   let obj = {
       name: 'iyongbao',
       age: 26
   }
   
   let str = `${obj.name} -- ${obj.age}`;
   
   console.log(str); // iyongbao -- 26

3. 我们还可以在模板字符串中调用函数

   function add (a, b) {
       return a + b;
   }
   
   let str = `得到的结果为：${add(1, 2)}`;
   
   console.log(str); // 得到的结果为：3

   注意 ：当我们使用${}的时候，其实JavaScript底层调用了变量的toString()方法。

三、标签模板

这个知识点大家可能会陌生，我简单和大家讲一讲，这里的标签说的其实是函数，模板说的就是字符串，给大家演示一个新颖的函数调用写法。

function foo (array, ...obj) {
    console.log(array, obj);
}

let name = 'iyongbao';
let age = 26;

foo`iyongbao ${name} age ${age}`; // ['iyongbao ', ' age ', '', raw: Array(3)] (2) ['iyongbao', 26]

我给大家分析一下结果：我定义了一个函数，这个函数有两个参数，array打印的是一个数组，...obj接收剩余参数。

• 第一个参数里边的值是模板字符串中那些没有被变量替换的值；
• 第二个参数是模板字符串中变量的值；
• 大家发现array中有一个raw属性，这里边存放的是转移后的原字符串。

foo`iyongbao ${name} age ${age}`换成我们常见的写法如下：

foo(['iyongbao ', ' age ', ''], iyongbao, 26);

3.1 raw静态方法

1. 这个方法虽然陌生但是很有用，在我们的工作中，经常碰到转义的问题：

   let path = `C:\work\network`;
   
   console.log(path);

   

   我们发现通过console.log之后结果换行了。我们只能不让\转移。

   let path = `C:\\work\\network`;
   
   console.log(path);

   

2. 在我们的String上有一个静态方法raw，可以帮助我们完成上边的操作。

   let res = String.raw`C:\work\network`;
   
   console.log(res);

   

3. 上边的方式用的还是少，一般都是后端传给我们前端处理后直接进行显示的，但是这种情况还是会转移。还是用正则处理一下吧，哈哈。

   let path = "C:\work\network";
   
   let res = String.raw`${path}`;
   
   console.log(res);

四、总结

今天又和大家探讨了一下ES6中关于字符串的一些扩展知识点，有些用的确实少，反正是学海无涯。欢迎各位小伙伴指正批评。