1. 字符串的遍历
ES6字符串增加了遍历器接口,for-of 语法,相比传统for(let i=0;.....)来循环字符串,for-of循环可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点
for (let cp of 'foo') {
console.log(cp)
}
复制代码
2. normalize()
在欧洲很多国家的字符中有语调和符号或重音符号,Unicode提供了两种方法。一种是直接提供带重音符号的字符,比如Ǒ(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如O(\u004F)和ˇ(\u030C)合成Ǒ(\u004F\u030C)。 这两种语法在在视觉和语义上都等价,过去javascript不能识别这种等价。
'\u01D1'==='\u004F\u030C' //false
'\u01D1'.length // 1
'\u004F\u030C'.length // 2
复制代码
ES6提供的normalize()方法,可在字符串比较之前正规化,规避这种错误。
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true
复制代码
3. includes()
过去判断数组或字符串中包含某一元素的时候需要用到indexOf()方法, 现在数组或字符串都能使用includes()方法来判断是否包含某一元素。
const arr = ['apple', 'banana', 'orange']
const str = 'Sometimes I walk a little faster in the school hallway just to get next to you.'
arr.includes('orange') //true
str.includes('walk') //true
复制代码
4. startsWith(), endsWith()
判断字符串是否以指定子串开头/结尾
'You can say goodbye and you can say hello'.startsWith('You')
//true
'Welcome to LA'.endsWith('LA')
//true
复制代码
5. repeat()
str.repeat(n)返回一个字符串,重复str n次的结果, 如果n是小数,则会被floor取整,n如果为其他类型则会转为数字再执行,如果为Infinity或负数或NaN, 报错
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // "
复制代码
6. padStart(),padEnd()
字符串没有达到要求的长度,可以在开始/结尾处填充到指定长度
let str = 'abc'
str.padStart(5, '>')
//>>abc
'x'.padEnd(5, 'ab') // 'xabab'
复制代码
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
复制代码
如果省略第二个参数,则默认补全空格
'x'.padStart(4)
// ' x'
复制代码
padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
复制代码
另一个用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
复制代码
7. 模版字符串
模版字符串是一种增强型的字符串,以符号``为标识,它可以当成普通的字符串使用,也可以不带\n直接写多行字符串,也可以在字符串中以${}插入变量或表达式
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
复制代码
模版字符串以反引号``作为标识,如果模版字符串中出现反引号,则需要用反斜杠转义`
let greeting = `\`Yo\` Greet!`;
// `Yo` Greet!
复制代码
如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。
// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"
复制代码
8. 模版编译函数
模版字符串的灵活使用,需要写编译函数来完成 下面,下面是一个通过模板字符串,生成正式模板的实例。
let template = `
<ul>
<% for(let i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
复制代码
上面的代码中, 放置了一个常规模板。该模板使用<%...%>放置JavaScript代码,使用<%= ... %>输出JavaScript表达式。
将上面的内容拼装成一个模板编译函数compile。
function compile(template){
var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(expr, '`); \n $1 \n echo(`');
template = 'echo(`' + template + '`);';
var script =
`(function parse(data){
var output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
}
复制代码
compile函数的用法如下。
var parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
// <ul>
// <li>broom</li>
// <li>mop</li>
// <li>cleaner</li>
// </ul>
复制代码
9. 标签模版
标签模版并不是模版,而是给函数传参的一种形式,标签就是指函数,模版就是指紧跟在后面的模版字符串。
let foo = 5;
let bar = 10;
tag`Hello ${ foo + bar } world ${ foo * bar }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
复制代码
下面是一个应用的例子
var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals, ...values) {
var output = "";
for (var index = 0; index < values.length; index++) {
output += literals[index] + values[index];
}
output += literals[index]
return output;
}
msg //"The total is 30 (31.5 with tax)"
复制代码
标签模版有一个经典的应用,过滤用户的恶意输入(XSS攻击)
var message =
SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData, ...values) {
var s = '';
for (var i = 0; i < values.length; i++) {
var arg = String(values[i]);
// Escape special characters in the substitution.
s += templateData[i] + arg.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
}
s += templateData[i];
return s;
}
复制代码
上面代码中,sender变量往往是用户提供的,经过SaferHTML函数处理,里面的特殊字符都会被转义。
var sender = '<script>alert("abc")</script>'; // 恶意代码
var message = SaferHTML`<p>${sender} has sent you a message.</p>`;
message
// <p><script>alert("abc")</script> has sent you a message.</p>
复制代码
标签模板的另一个应用,就是多语言转换(国际化处理)。
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx,您是第xxxx位访问者!
复制代码
之所以叫标签模版,其实最多的使用真实是用来处理标签模版
jsx`
<div>
<input
ref='input'
onChange='${this.handleChange}'
defaultValue='${this.state.value}' />
${this.state.value}
</div>
`
复制代码
模板字符串本身并不能取代Mustache之类的模板库,因为没有条件判断和循环处理功能,但是通过标签函数,你可以自己添加这些功能。
// 下面的hashTemplate函数
// 是一个自定义的模板处理函数
// 将伪代码转换为实际结果
var libraryHtml = hashTemplate`
<ul>
#for book in ${myBooks}
<li><i>#{book.title}</i> by #{book.author}</li>
#end
</ul>
`;
复制代码
下面则是一个假想的例子,通过java函数,在JavaScript代码之中运行Java代码。
java`
class HelloWorldApp {
public static void main(String[] args) {
System.out.println(“Hello World!”); // Display the string.
}
}
`
HelloWorldApp.main();
复制代码
模板处理函数的第一个参数(模板字符串数组),还有一个raw属性。
console.log`123`
// ["123", raw: Array[1]]
复制代码
上面代码中,console.log接受的参数,实际上是一个数组。该数组有一个raw属性,保存的是转义后的原字符串。
请看下面的例子。
tag`First line\nSecond line`
function tag(strings) {
console.log(strings.raw[0]);
// "First line\\nSecond line"
}
复制代码
上面代码中,tag函数的第一个参数strings,有一个raw属性,也指向一个数组。该数组的成员与strings数组完全一致。比如,strings数组是["First line\nSecond line"],那么strings.raw数组就是["First line\nSecond line"]。两者唯一的区别,就是字符串里面的斜杠都被转义了。比如,strings.raw数组会将\n视为\和n两个字符,而不是换行符。这是为了方便取得转义之前的原始模板而设计的。
10. String.raw()
ES6 String.raw()可以理解为功能为转义的标签模版函数,它的功能是把字符串中的\转义,结果为\ \
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
String.raw`Hi\u000A!`;
// 'Hi\\u000A!'
复制代码
如果原字符串的斜杠已经转义,那么String.raw不会做任何处理。
String.raw`Hi\\n`
// "Hi
复制代码
String.raw方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。
//'test'会先转为['t', 'e', 's', 't']
String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'
// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
复制代码