【ES6 笔记】字符串和模板字符串

原计划这篇笔记是像原书那样将字符串和正则一起整理出来，结果发现一个模板字符串就挺长的，那就只写字符串相关吧_{正则新内容比较少，也很简单，就不单独写了}

字符串新增API

• codePointAt()
  解决非BMP字符码位问题(BMP，Basic Multilingual Plane 基本多文种平面)。
  超出UTF-16中能够用16位编码单元表示范围的字符叫做BMP，ES5中无法按预期得到自己穿的编码结果，因此ES6中引入了codePonitAt()，解决该问题。

let text = '';
console.log(text.charAt(0))  // ''
console.log(text.charAt(1))  // ''
console.log(text.charCodeAt(0))  // 55362
console.log(text.charCodeAt(1))  // 57271
console.log(text.codePointAt(0))  // 134071
console.log(text.codePointAt(1))  // 57271

• String.fromCodePoint()
  codePointAt()的逆操作方法

console.log(String.fromCodePoint(134071));   // ''

• normalize()
  在对比自己串之前，将其标准化同一种形式，默认“NFC”

1. NFC：以标准等价方式分解，然后以标准等价方式重组
2. NFD：以标准等价方式分解
3. NFKC： 以兼容等价方式分解
4. NFKD： 以兼容等价方式分解

• includes()
  如果在字符串中检测到指定文本则返回true，否则返回false。
• startWith()
  如果字符串的起始部分检测到指定文本则返回true，否则返回false。
• endWidth()
  如果字符串的结束部分检测到指定文本则返回true，否则返回false。
  以上三个方法都接收两个参数：第一个参数指定要搜索的文本；第二个参数是可选的，指定一开始搜索的位置的索引值。
  endWith()方法从这个索引值减去欲搜索文本长度的位置开始正向匹配。

let message = 'hello world!';

console.log(message.includes('o'));  //true 匹配的是正向第一个字母“o”
console.log(message.startWith('hello'));  //true  字符串以‘hello’开头
console.log(message.endWith('!'));  //true  字符串以“！”结尾

console.log(message.startWith('o',4));   //true  字符串索引为4的位置是“o”
console.log(message.endWidth('o',8));   //true  字符串索引位置7是“o” 索引值8减去欲搜索的文本长度1等于正向开始的位置，正向索引7位置是“o”结束的
console.log(message.includes('o',8));   //false 索引位置8开始往后计算，没有字母“o”

模板字面量

模板字面量也算是字符串的一种扩展，但是因为比较重要和实用，单独列出来做笔记。
解决问题：
1. 多行字符串：一个正式的多行字符串的概念。ES5中如果需要处理的字符串比较长时，换行比较麻烦；
2. 基本的字符串格式化：将变量的值嵌入字符串的能力。ES5需要字符串里加变量的时候主要是用“+”进行拼接；
3. HTML转义：向HTML插入经过安全转换后的字符串的能力。有效的解决了前端的XXS攻击。

• 基础语法: 用反引号(`)替换单双引号

let  message = ` hello world ! `;
console.log(message); //  hello world ! 

• 多行字符串

let  message = ` hello world !
This is ES6!`;
console.log(message); 
// hello world ! 
//This is ES6!
*hello 前有一个空格要注意，因为空格也是属于字符串的一部分

• 占位符：${变量}就是我们常用的占位符，变量部分可以用JS的任意表达式进行替换。

let name = 'King';
let message = ' Hello, ${name}';
console.log(message) ;  //Hello,King

• 标签模板
  这个是模板字面量最有威力也是最复杂的部分。
  从代码开始看起吧，能更好的理解什么是标签模板。

let name = 'King';
let language = 'ES6';
let message = tag`Hello ${name},\n welcome to ${language} world!`;

function tag(literals,...substitutions){
  *模板标签是一个函数，调用时传入加工过的模板字面量各个部分的数据。
  *第一个参数是一个数组，包含JS解释过后的字面量字符串，它之后的所有参数都是每一个占位符的解释值。

   console.log(`literals:`,literals);
   //["Hello ", ",↵ welcome to ", " world!", raw: ["Hello ", ",\n welcome to ", " world!"]]
   * literals:注释后是通过谷歌浏览器控制台输出的值，是一个数组，
     但是大家可能看着比较困惑，数组里怎么还有对象？一点点解释，别着急。
   * 首先，暂时不看raw相关的内容，其他的数组项，分别是message字符串中的常量部分。
     注意看literals[0]项的值是含空格的，
     literals[1]项时带着处理过的换行符的，
     literals[2]项也是包含world前面的空格符的。
     至此，literals是被占位符${变量}分隔开的各个常量项。
     我们会发现literals[1]中在message定义时写的‘\n’被解释为一个新行，而不是原本的'\n'换行符。
   * 好，那我们要是想要没有被处理过的原文本常量怎么办？ES6中把这个叫做原生字符串信息。
     刚刚控制台输出的数组中有一个raw属性，这个就是ES6中模板字面量的一个新属性，是一个包含一个字面值的原生等价信息数组。
     举个例子：literals[1]总有一个对应的literals.raw[1]
     literals[1]        ==> ",↵ welcome to "   //处理过的字面值
     literals.raw[1]    ==> ",\n welcome to "  //原生字面值

   console.log(`substitutions:`,substitutions);
   //["King", "ES6"]
   * substitutions：这个一看就比较简单明确了，就是我们模板字面量里的占位符被处理过的结果。
}

上边写了这么长的解释内容，有些同学可能还比较困惑，这个标签模板到底有什么用？
其实也就是把模板字面量的各个项都拆分开，可以让你更自由的或是说更复杂的处理这一段信息，在里面加上对业务有用的信息。
比如说在函数里对substitutions的第二个值进行判断，如果值是ES6，那就把它变成Javascript，然后再把literals和substitutions的各个项重新组合起来，输出结果就变成了“Hello King，welcome to Javascript world!`”。当然，这只是一个例子，实际肯定不会像我这么无聊。

注意： 这里有几个小技巧

1. literals[0]总是字符串的始端，假设将上边的 message 变成 tag${name},\n welcome to ${language} world! ，那literals[0]的值就会变成''一个空字符串，就像literals[literals.length-1]总是字符串的结尾一样。
2. 根据上一条，可以总结出substitutions的数量总比literals的数量少一个。
   即：substitutions.length===literals.length-1 的结果总为true。
3. 标签模板函数内部建议使用substitutions.length来做循环计数，使用literals.length常常会越界。

• String.raw:模板字面量中使用原始值,输出模板的原生形式。

let message1 = `Hello\nWorld`;
let message2 = String.raw`Hello\nWorld`;

console.log(message1);
//Hello
//World
console.log(message2); //Hello\nWorld