ES6学习-字符串的扩展

说明：本文参考阮一峰的ECMAScript 6 入门
概要：

1. 字符串的Unicode表示法\uxxxx,超出范围\u{xxxx}；
2. 字符串for…of遍历器，可识别超出\uFFFF的码点；
3. 反引号表示的模板字符串（``），${}嵌入变量。

1.字符串的Unicode表示法

ES6加强了对Unicode的支持，允许采用\uxxxx的形式表示一个字符，其中xxxx表示字符的Unicode码点。

"\u0061"
// "a"

这种表示方法，只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须使用两个双字节的形式表示。

"\uD842\uDFB7"
// "????"

"\u20BB7"
//"₻7"

上面的"????"字符超出了\uFFFF，需要使用两个双字节表示。而超出范围的"\u20BB7"没能正确解读对应字符。

ES6对这种情况做了改进，只要将码点放进大括号中，就能正确解读字符，无需使用两个双字节表示。

"\u{20BB7}"
// "????"

"\u{41}\u{42}\u{43}"
//"ABC"

let hello = 123
hell\u{6F} //123

'\u{1F680}' === '\uD83D\uDE80'
// true

上面代码中，最后一个例子，说明大括号表示法和两个双字节表示法（即四字节的UTF-16编码）等价。

2.字符串的遍历器接口

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

for (let codePoint of  "foo")  {
	console.log(codePoint)
}
// "f"
// "o"
// "o"

除了遍历字符串。这个遍历器最大的优点是可以识别大于\uFFFF的码点，传统的for循环无法识别这样的码点。

let text= String.fromCodePoint(0x20BB7)

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let iof text){
	console.log(i)
}
// ????

上面代码中，text只一个字符，但for循环会认为它包含两个字符（都不可打印），而for…of循环会正确识别出这一个字符。

3.模板字符串

ES6之前，JavaScript的字符串在涉及文本和变量结合时，需要被变量隔开，因为引号里面是不能识别变量的。这样因为是本身一段输出变成多段字符串结合，多个引号和加号很是繁琐。例如下面的例子（使用了jQuery的方法）

var basket = {
		count: 6,
		onSale: 2
}
$("#result").append('There are <b>' + basket.count + '</b>' +' items in your bakset,' + '<em>' + basket.onSale + '</em> are on sale!' )

上面的代码，多个引号和加号的存在使得代码的不简洁的同时可读性也很差。ES6引入了模板字符串来解决这个问题。

$("#result").append(`
	There are <b>${basket.count}</b> items
	in your basket,<em>${basket.onSale}</em>
	are on sale!
`)

如上所示，模板字符串使用反引号（`）标识，${}用来嵌入变量。它可以当做普通字符串来使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面的模板字符串，都是用了反引号表示。

如果要在模板字符串中使用反引号，则需要在反引号前面加上反斜杠进行转义。

let greeting = `\`ho\` World` //`ho` World