Es6字符串的扩展

字符串的遍历器接口

• ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。
• 除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF¹的码点，传统的for循环无法识别这样的码点。

var arr = []
// 不需要再定义循环变量就可以直接遍历数组
for (let call of 'better'){
   arr.push(call)
}

---

模版字符串

'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'

• 上面是ES5里面传统的字符串拼接方法，可以看得出来，这样的方法工程量比较大，在实际应用开发里面相当的不方便，所以下面就介绍一下ES6里面的新方法。

`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`

• 如上，我们只需要在所要添加的字符串前后加上 反引号 （`） 即可，他是我们键盘数字栏最左边的按键。这种方法也称之为 模版字符串²。

• {basket.onSale}和{basket.count}都是代码中的变量，在我们模版字符串中引用变量的方法 => ${}

• `` 内的内容可以有很多，但是当我们添加一些特殊的字符时，就要做一些特别的处理。

`\`this is a special sign\``  // => 结果： `this is a special sign`
 //比如说我们添加 ` 的时候，不能直接添加，因为会引起歧义，此时我们要先用
// 反斜杠(\)进行转义

• 如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明 =>报错
let msg = `Hello, ${place}`;
let msg1 = `Hello ${'World'}`
// "Hello World"
// 也就是说因此大括号内部是一个字符串，将会原样输出。

---

标签模板

let a=2,
    b=3;
function tag(s, v1){
  console.log(s[0]); // 'hello'
  console.log(s[1]); //'world'
  console.log(s[2]); // ''(空)
  console.log(v1);  // 6
}

tag`Hello ${a*b} world `

• 上面的引用模式又叫标签模版，标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
• 但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
• 变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。（比较重要）

function tag(array, s1,s2,......){}
// tag`hello ${a*b} world `
// array表示没有变量替换部分的数组，s1,s2，s3甚至更多则表示需要变量替换的部分
//hello world就是没有变量替换的部分, array = ['hello','world',''] s1= 2*3=6
//当然如果有更多变量接收的参数自然变多
// 变量的替换发生在 'hello' 和 'world' 之间

//tag函数所有参数的实际值如下。
//第一个参数：['Hello ', ' world ', '']
//第二个参数: 6

具体传参的做法：

• 第一种

// 1. 第一种做法
let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {
  let result = '';
  let i = 0;

  while (i < literals.length) {
    // console.log(literals) 大家可以尝试一下在控制看看输出的是什么
    result += literals[i++];
    if (i < arguments.length) {
      // console.log(arguments)
      result += arguments[i];
    }
  }

  return result;
}
console.log(passthru(msg))   //  => The total is 30 (31.5 with tax)

• 第二种

let total1 = 30
let msg1
function passthru1(literals, ...values) {
  let output = "";
  let index;
  for (index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }

  output += literals[index]
  return output;
}
mesg1 = passthru`The total is ${total} (${total*1.05} with tax)`;
console.log(msg1)  // => The total is 30 (31.5 with tax)

两种做法虽然不太相像，但是最后都能够得到相同的结果。

//下面是第一种做法中的：literals,其实也就是把除了变量以外拿出来放到数组里面
(3) ["The total is ", " (", " with tax)", raw: Array(3)]  
// 这是函数自带 argument的内容,argument是函数参数的一个类数组集合
Arguments(3) [Array(3), 30, 31.5,

//第二种做法中的 literals：
["The total is ", " (", " with tax)", raw: Array(3)] 
//第二种做法中的 values
values[30,31.5]

//两种方法没有本质的区别，唯一的区别就是函数调用的方式不一样，关于传参方面的内容大家不懂得话可以再看看上面 tag函数那里

---

1. ES6 对这一点做出了改进，只要将码点放入大括号{}，就能正确解读该字符 ↩︎

2. 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 ↩︎