ECMAScript求索 · 字符串的扩展

0x01.概念

ES6对字符串的扩展主要包括原型方法 includes()、startsWith()、endsWith()、repeat()与使用``操作符的模板字符串。可以通过在控制台打印String.prototype的方式来查看当前浏览器包含(支持)哪些原型方法。下面我们逐一学习ES6中新增加的扩展方法，额外还有在ES7中增加的 padStart() 与 padEnd() 也将引入到本次学习的内容中。

0x02. String.prototype.includes()

在此以前，我们对字符串的操作中最常用的一个方法是 String.prototype.indexOf() 与 String.prototype.lastIndexOf()，这两个方法分别会返回所查找的字符片段第一次出现的位置和反向第一次出现的位置，如果不包含，则返回 -1。假设现在我们有这样一个需求：判断字符 "c" 是否被包含在字符串 "abcde" 中，如果使用传统的 indexOf() 方法，我们可能会像下面代码段一样书写程序：

let str = 'abcde';

let flag = str.indexOf('c')==-1?false:true; // str.indexOf('c') 返回 2

console.log(flag); // true

现在ES6提供了新的原型方法 includes() ，该方法在字符串中寻找指定的字符片段，如果包含，则返回布尔类型值 true，反之返回 false, 使用 includes() 方法可以使我们省去了自行判断返回值的操作，直接使用该方法的返回值，从而更加方便地完成上面的需求：

let str = "abcde";

let flag = str.includes('c'); // 返回 true

console.log(flag); // true

现在详细讲解 includes() 方法：

String.prototype.includes(string, [num])

功能：在当前字符串中从指定的开始位置num[可选]寻找指定的字符片段string，如果包含，则返回布尔类型值 true，反之返回 false。

参数：string   要查找的字符片段(必须)

           num     开始查找的位置(可选)

返回值类型：Boolean

 includes() 方法有两个参数，第一个为希望查找的字符片段，这个参数必须存在，否则一律返回 false，第二个参数为希望开始查找的位置，此参数为数字类型，若不是数字，则解释器默认将此参数转换为数字类型再进行操作，此参数如果不传的话则默认从字符串开始的位置进行查找。方法返回一个类型为布尔型的结果，若字符片段存在于被查找的字符串中，返回true，否则返回 false。

0x03. String.prototype.startsWith()

startsWith() 方法用于判断字符串是否以指定字符片段作为开头，如果是返回 true，否则返回 false。

String.prototype.startsWith(string, [num])

功能：判断当前字符串是否以指定字符片段string开始，如果是返回布尔类型值 true，反之返回 false，并且可以手动指定开始查找的位置num[可选]。

参数：string    要查找的字符片段(必须)

           num     开始查找的位置(可选)

返回值类型：Boolean

 下面举例说明：

let str = 'abcde';

let flagA = str.startsWith('a'); // true

let flagB = str.startsWith('e'); // false

let flagC = str.startsWith('e', 4); // true

let flagD = str.startsWith('ab'); // true

0x04. String.prototype.endsWith()

endsWith() 与 startsWith() 方法相类似，只不过用于判断字符串是否以指定字符片段作为结尾，如果是返回 true，否则返回 false。

String.prototype.endsWith(string, [num])

功能：判断当前字符串是否以指定字符片段string结束，如果是返回布尔类型值 true，反之返回 false，并且可以手动指定查找的结束位置num[可选]。

参数：string    要查找的字符片段(必须)

           num     开始查找的位置(可选)

返回值类型：Boolean

 值得指出的是 endsWith() 中的可选参数num并不是指定开始查找的位置，而是指定查找结束的位置，举例如下：

let str = 'abcde';

let flagA = str.endsWith('e'); // true

let flagB = str.endsWith('a'); // false

let flagC = str.endsWith('c', 3); // true

let flagD = str.endsWith('de'); // true

 0x05. String.prototype.repeat()

在书写CSS样式表的时候，我们经常会用到一个关于图片背景的属性 "no-repeat" ，通过设置这个属性让图片背景不重复，那我们可以猜出 repeat() 方法用于重复字符串。

String.prototype.repeat(num)

功能：重复当前字符串指定次数num。

参数：num    字符串重复的次数(必须)

返回值类型：String

 下面举例说明：

let str = 'ABC'.repeat(3); // ABCABCABC

需要注意的是，参数 num 只能使用整数类型，且不能使用负数和 Infinity ，否则解释器将会给出错误信息：Invalid count value
    at String.repeat。另外，如果参数 num 使用了小数，那么在程序执行的过程中将会以 parseInt() 的形式取整，所以以下三个表达式是等效的：

let str = 'ABC'.repeat(3.1); // ABCABCABC

let str = 'ABC'.repeat(3); // ABCABCABC

let str = 'ABC'.repeat(3.9); // ABCABCABC

 0x06. String.prototype.padStart()

padStart() 方法是ES7标准中加入的方法，其作用是按照给定的长度与指定的字符片段和原字符串进行补全并返回。

String.prototype.padStart(length,string)

功能：使用string将字符串向前补全到length长度。

参数：length    需要补全的目标长度(必须)

           string     用于补全的字符片段(必须)

返回值类型：String

 举例说明：

let str = 'ABC'.padStart(6, 'a'); // aaaABC

let str = 'ABC'.padStart(6, 'abc'); // abcABC

let str = 'ABC'.padStart(8, 'abc'); // abcabABC

0x07. String.prototype.padEnd()

padEnd() 方法也是ES7标准中加入的方法，其作用是按照给定的长度与指定的字符片段和原字符串进行补全并返回。

String.prototype.padEnd(length,string)

功能：使用string将字符串向后补全到length长度。

参数：length    需要补全的目标长度(必须)

           string     用于补全的字符片段(必须)

返回值类型：String

  举例说明：

let str = 'ABC'.padEnd(6, 'a'); // ABCaaa

let str = 'ABC'.padEnd(6, 'abc'); // ABCabc

let str = 'ABC'.padEnd(8, 'abc'); // ABCabcab

0x07.模板字符串

模板字符串是增强型的字符串，使用反引号 ` 标识(反引号位于键盘左上角，【Esc】键的下方，【1】建的左边)，使用 `` 包裹的字符串种可以使用模板语法 ${ val } 将变量直接插入字符串而不用再使用字符串连接符 + 。下面举例说明，假设我们要将变量name插入字符串中，如下使用传统写法：

let name = 'Mocha';

console.log('Hello ' + name + '. Welcome to my 优快云 blog.'); // Hello Mocha. Welcome to my 优快云 blog.

如果使用模板字符串，可以写为如下形式：

let name = 'Mocha';

console.log(`Hello ${ name }. Welcome to my 优快云 blog.`); // Hello Mocha. Welcome to my 优快云 blog.

 从例子上我们可以看出使用了模板字符串可以使用 ${ val } 将JavaScript变量很轻松地插入到一段字符串中，再结合字符串模板的另一特性，可换行，我们就可以很容易地去拼接HTML片段。如下使用传统方法：

let className = 'IDCard';
let name = 'Mocha';
let age = 18;
let htmlStr = '<div class="'+className+'">' +
    '<span>姓名</span><span>'+name+'</span>' +
    '<span>年龄</span><span>'+age+'</span>' +
    '</div>';

使用传统方法拼接HTML片段因为有太多的连接符所以极易出错，如果使用模板字符串，则如下所示：

let className = 'IDCard';
let name = 'Mocha';
let age = 18;
let htmlStr = `<div class="${className}">
                   <span>姓名</span><span>${name}</span>
                   <span>年龄</span><span>${age}</span>
               </div>`;

使用模板字符串可以提升开发的效率，并减少代码出错的可能性。

0x08.总结

以上就是在学习ES6过程中字符串扩展的一些记录，如果在描述和理解又不正确的地方，还请不吝赐教！

0x09.参考资料

MDN web docs——String

字符串的扩展 - 《ECMAScript 6 入门》——阮一峰