ES6学习笔记第四章-创新互联
字符串的扩展
1 字符的Unicode表示法
js允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的码点。
"\u0061"
//a
ES6做出了一点改进，大括号表示法与四字节的UTF-16编码是等价的，只要将码点放入大括号，就能正确解读。
2 codePointAt()
js内部，字符以UTF-16的格式存储，每个字符固定为2字节。对于那些需要4个字节存储的字符，js会认为他们是2个字符。ES6提供了codePointAt()方法，能够正确处理4个字节存储的字符，返回一个字符的码点。
codePointAt()方法是测试一个字符由2个还是4个字节组成的最简单方法。
function is32Bit(c){
return c.codePointAt(0)>0xFFFF;
}
3 String.fromCodePoint()
ES5提供了String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符。ES6提供了String.fromCodePoint方法，弥补了String.fromCharCode方法的不足。
该方法作用上正好和codePointAt方法相反。
4 字符串的遍历器接口
ES6为字符串添加了遍历器接口，使字符串可以由for...of循环遍历。
for (let codePoint of 'foo'){
console.log(codePoint);
}
// "f"
//"o"
//"o"
这个遍历器大的优点是可以识别大于0xFFFF的码点，传统for循环无法识别。
5 at()
ES6为字符串实例提供了at方法，等同于ES5的charAt方法，并可以识别Unicode编号大于0xFFFF的字符。
6 normalize()
7 includes(), startsWith(), endsWith()
js中只有indexOf方法可以用来确定一个字符串是否包含在另一个字符串中。
ES6则又提供了3种新方法
includes() :返回布尔值，表示是否找了到参数字符串
startsWith() :返回布尔值， 表示参数字符串是否在源字符串的头部。
endsWith(): 返回布尔值，表示参数字符串是否在源字符串的尾部。
8 repeat()
repeat 方法返回一个新的字符串，表示将原字符串重复n次。
参数是负数或者Infinity，会报错。小数会向下取整。如果是字符串，会先转换成数字。
9 padStart(), padEnd()
ES7推出字符串补全长度的功能。如果某个字符串未达到指定长度，会在头部或者尾部补全。
padStart 和padEnd分别接受两个参数，第一个用来指定字符串的最小长度，第二个则是用来补全的字符串。
如果原字符串的长度等于或者大于指定的最小长度，则返回原字符串。
如果省略第二个参数，则会用空格来补全。
10 模板字符串
模板字符串是增强版的字符串，用反引号（`）标识。他可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
$("#result").append(`
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
`);
如果在模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
var greeting = `\`yo\`world！`;
在模板字符串中使用多行字符，所有空格和缩进都会被保留在输出中。
大括号内可以放入任意的js表达式，可以进行运算，以及引用对象属性。
模板字符串中还能调用函数
如果大括号中的值不是字符串，将按照一般的规则转化成为字符串。
11.实例：模板编译
下面，我们来看一个通过模板字符串，生成正式模板的实例。
var template = `
- <%= data.supplies[i] %>
<% for(var i=0; i < data.supplies.length; i++) { %>
<% } %>
`;
上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置JavaScript代码，使用<%= ... %>输出JavaScript表达式。
怎么编译这个模板字符串呢？
一种思路是将其转换为JavaScript表达式字符串。
echo('
- ');
- ');
echo(data.supplies[i]);
echo('
');
for(var i=0; i < data.supplies.length; i++) {
echo('
};
echo('
这个转换使用正则表达式就行了。
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 + '`);';
然后，将template封装在一个函数里面返回，就可以了。
var script =
`(function parse(data){
var output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
将上面的内容拼装成一个模板编译函数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)); //eval()计算字符串方法。
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//
- broom
- mop
- cleaner
//
//
//
//
12. 标签模板
模板字符串可以紧跟在一个函数后面，该函数将被调用来处理这个模板字符串。称之为“标签模板”功能。标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。
函数tag依次会接收到多个参数。
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。
tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。
tag函数所有参数的实际值如下。
第一个参数：['Hello ', ' world ', '']
第二个参数: 15
第三个参数：50
也就是说，tag函数实际上以下面的形式调用。
tag(['Hello ', ' world ', ''], 15, 50)
我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。
var a = 5;
var b = 10;
function tag(s, v1, v2) {
console.log(s[0]);
console.log(s[1]);
console.log(s[2]);
console.log(v1);
console.log(v2);
return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"
13 String.raw()
ES6还为原声的String对象提供了raw方法。
String.raw方法往往用来充当模板字符串的处理函数，返回一个反斜线都会被转义（既反斜线前加反斜线）的字符串，对应于替换变量后的模板字符串
如果原字符串的反斜线已经转义，那么String.raw不会做任何处理。
String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。
String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享名称：ES6学习笔记第四章-创新互联
网站路径：http://myzitong.com/article/dpcpop.html