ES6 字符串的拓展方法

一、子串的识别

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

• includes()：返回布尔值，判断是否找到参数字符串。
• startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。

let string = "apple,banana,orange";

string.includes("banana"); // true

string.startsWith("apple"); // true

string.endsWith("apple"); // false

string.startsWith("banana",6) // true

注意点：

• 这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。
• 这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。

二、字符串重复

repeat()：返回新的字符串，表示将字符串重复指定次数返回。

console.log("Hello,".repeat(2));  // "Hello,Hello,"

1、如果参数是小数，向下取整

console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello

2、如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次

console.log("Hello,".repeat(-0.5));  // "" 

3、如果参数是 NaN，等同于 repeat 零次

console.log("Hello,".repeat(NaN));  // "" 

4、如果参数是负数或者 Infinity ，会报错:

console.log("Hello,".repeat(-1));  
// RangeError: Invalid count value

console.log("Hello,".repeat(Infinity));  
// RangeError: Invalid count value

5、如果传入的参数是字符串，则会先将字符串转化为数字

console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2"));  // "Hello,Hello,"

三、字符串补全

• padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
• padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"

1、如果指定的长度小于或者等于原字符串的长度，则返回原字符串:

console.log("hello".padStart(5,"A"));  // "hello"

2、如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串:

console.log("hello".padEnd(10,",world!"));  // "hello,worl"

常用于补全位数：

console.log("123".padStart(10,"0"));  // "0000000123"

四、消除字符串空格

trimStart()：消除字符串头部的空格

trimEnd()：消除尾部的空格

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

五、其他

1、matchAll()：返回一个正则表达式在当前字符串的所有匹配

2、String.fromCodePoint() 

ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。在作用上，正好与下面的codePointAt()方法相反。

String.fromCodePoint(0x20BB7) // "𠮷"

String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true

上面代码中，如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。

注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上

3、String.raw()：该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

String.raw`Hi\\n` === "Hi\\\\n" // true

4、codePointAt()：JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。ES6 提供了codePointAt()方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

5、normalize() ：用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。

六、模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

1、基本用法

1）普通字符串

let string = `Hello'\n'world`;

console.log(string);

// "Hello'

// 'world"

2）多行字符串:

let string1 = `Hey, can you stop angry now?`;

console.log(string1);

// Hey,

// can you stop angry now?

3）字符串插入变量和表达式。

变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

let name = "Mike";

let age = 27;

let info = `My Name is ${name},I am ${age+1} years old next year.`

console.log(info); // My Name is Mike,I am 28 years old next year.

4）字符串中调用函数：

function f(){

return "have fun!";

}

let string2= `Game start,${ f() }`;

console.log(string2); // Game start,have fun!

注意要点

模板字符串中的换行和空格都是会被保留的

innerHtml = `<ul>

<li>menu</li>

<li>mine</li>

</ul> `;

console.log(innerHtml);

// 输出

<ul>

<li>menu</li>

<li>mine</li>

</ul>

七、、标签模板

标签模板，是一个函数的调用，其中调用的参数是模板字符串。

alert`Hello world!`;

// 等价于

alert('Hello world!');

应用

过滤 HTML 字符串，防止用户输入恶意内容。

function f(stringArr,...values){ let result = ""; for(let i=0;i<stringArr.length;i++){ result += stringArr[i]; if(values[i]){ result += String(values[i]).replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;"); } } return result; } name = '<Amy&MIke>'; f`<p>Hi, ${name}.I would like send you some message.</p>`; // <p>Hi, &lt;Amy&amp;MIke&gt;.I would like send you some message.</p>

国际化处理（转化多国语言）

i18n`Hello ${name}, you are visitor number ${visitorNumber}.`; // 你好**，你是第**位访问者

八、字符串的遍历器接口

ES6 为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。

for (let codePoint of 'foo') {

console.log(codePoint)

}

// "f"

// "o"

// "o"

 

九、JSON.stringify(）改造

为了确保返回的是合法的 UTF-8 字符，ES2019 改变了JSON.stringify()的行为。如果遇到0xD800到0xDFFF之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。

JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""