标签：template string 简单方法 代码 ocs 它的 问题 javascrip result
1、字符串扩展
参考地址：http://es6.ruanyifeng.com/#docs/string
1.1、codePointAt()
JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符。
var s = "??"; s.length // 2 s.charAt(0) // ‘‘ s.charAt(1) // ‘‘ s.charCodeAt(0) // 55362 s.charCodeAt(1) // 57271
上面代码中，汉字“??”（注意，这个字不是“吉祥”的“吉”）的码点是0x20BB7，UTF-16 编码为0xD842 0xDFB7（十进制为55362 57271），需要4个字节储存。对于这种4个字节的字符，JavaScript 不能正确处理，字符串长度会误判为2，而且charAt方法无法读取整个字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值。
ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。
let s = ‘??a‘; s.codePointAt(0) // 134071 s.codePointAt(1) // 57271 s.codePointAt(2) // 97
codePointAt方法的参数，是字符在字符串中的位置（从 0 开始）。上面代码中，JavaScript 将“??a”视为三个字符，codePointAt 方法在第一个字符上，正确地识别了“??”，返回了它的十进制码点 134071（即十六进制的20BB7）。在第二个字符（即“??”的后两个字节）和第三个字符“a”上，codePointAt方法的结果与charCodeAt方法相同。
总之，codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。
codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。
let s = ‘??a‘; s.codePointAt(0).toString(16) // "20bb7" s.codePointAt(2).toString(16) // "61"
你可能注意到了，codePointAt方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt方法传入 2。解决这个问题的一个办法是使用for...of循环，因为它会正确识别 32 位的 UTF-16 字符。
let s = ‘??a‘; for (let ch of s) { console.log(ch.codePointAt(0).toString(16)); } // 20bb7 // 61
codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。
function is32Bit(c) { return c.codePointAt(0) > 0xFFFF; } is32Bit("??") // true is32Bit("a") // false
1.2、String.fromCodePoint()
ES5 提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别 32 位的 UTF-16 字符（Unicode 编号大于0xFFFF）。
String.fromCharCode(0x20BB7) // "?"
上面代码中，String.fromCharCode不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符。
ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。
String.fromCodePoint(0x20BB7) // "??" String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘ // true
上面代码中，如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。
注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。
1.3、字符串遍历
ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被for...of循环遍历。
let text = String.fromCodePoint(0x20BB7); for (let i = 0; i < text.length; i++) { console.log(text[i]); } // " " // " " for (let i of text) { console.log(i); } // "??"
1.4、at
返回字符串给定位置的字符。原来的charAt不能识别码点大于0xFFFF的字符。
‘abc‘.at(0) // "a" ‘??‘.at(0) // "??"
1.5、包含
原来只有indexOf方法，现扩展为
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
1.6、repeat
repeat方法返回一个新字符串，表示将原字符串重复n次。
‘x‘.repeat(3) // "xxx" ‘hello‘.repeat(2) // "hellohello" ‘na‘.repeat(0) // "" ‘na‘.repeat(2.9) // "nana"
参数如果是小数，会被取整。
1.7、字符串补全长度
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
1.8、模板字符串
传统的 JavaScript 语言，输出模板通常是这样写的。
$(‘#result‘).append( ‘There are <b>‘ + basket.count + ‘</b> ‘ + ‘items in your basket, ‘ + ‘<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! `);
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。如果你不想要这个换行，可以使用trim方法消除它。
模板字符串中嵌入变量，需要将变量名写在${}之中。模板字符串之中还能调用函数。
由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。
如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
// 写法一 let str = ‘return ‘ + ‘`Hello ${name}!`‘; let func = new Function(‘name‘, str); func(‘Jack‘) // "Hello Jack!" // 写法二 let str = ‘(name) => `Hello ${name}!`‘; let func = eval.call(null, str); func(‘Jack‘) // "Hello Jack!"
示例、模板编译
下面，我们来看一个通过模板字符串，生成正式模板的实例。
let template = ` <ul> <% for(let i=0; i < data.supplies.length; i++) { %> <li><%= data.supplies[i] %></li> <% } %> </ul> `;
上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。
怎么编译这个模板字符串呢？
一种思路是将其转换为 JavaScript 表达式字符串。
echo(‘<ul>‘); for(let i=0; i < data.supplies.length; i++) { echo(‘<li>‘); echo(data.supplies[i]); echo(‘</li>‘); }; echo(‘</ul>‘);
这个转换使用正则表达式就行了。
let evalExpr = /<%=(.+?)%>/g; let expr = /<%([\s\S]+?)%>/g; template = template .replace(evalExpr, ‘`); \n echo( $1 ); \n echo(`‘) .replace(expr, ‘`); \n $1 \n echo(`‘); template = ‘echo(`‘ + template + ‘`);‘;
然后，将template封装在一个函数里面返回，就可以了。
let script = `(function parse(data){ let output = ""; function echo(html){ output += html; } ${ template } return output; })`; return script;
将上面的内容拼装成一个模板编译函数compile。
function compile(template){ const evalExpr = /<%=(.+?)%>/g; const expr = /<%([\s\S]+?)%>/g; template = template .replace(evalExpr, ‘`); \n echo( $1 ); \n echo(`‘) .replace(expr, ‘`); \n $1 \n echo(`‘); template = ‘echo(`‘ + template + ‘`);‘; let script = `(function parse(data){ let output = ""; function echo(html){ output += html; } ${ template } return output; })`; return script; }
compile函数的用法如下。
let parse = eval(compile(template)); div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] }); // <ul> // <li>broom</li> // <li>mop</li> // <li>cleaner</li> // </ul>
1.9、标签模板
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
alert`123`
// 等同于
alert(123)更多查看原文：http://es6.ruanyifeng.com/#docs/string#%E6%A0%87%E7%AD%BE%E6%A8%A1%E6%9D%BF
标签：template string 简单方法 代码 ocs 它的 问题 javascrip result
原文地址：https://www.cnblogs.com/bjlhx/p/8976612.html
