ES6学习-字符串的扩展
程序员文章站
2023-12-21 13:20:04
...
说明:本文参考阮一峰的ECMAScript 6 入门
概要:
- 字符串的Unicode表示法\uxxxx,超出范围\u{xxxx};
- 字符串for…of遍历器,可识别超出\uFFFF的码点;
- 反引号表示的模板字符串(``),${}嵌入变量。
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