06- String 扩展 与 模板字符串
1、String.fromCharCode()
用于从码点返回对应字符，但是这个方法不能识别 32 位的 UTF-16 字符（Unicode 编号大于0xFFFF）。
String.fromCharCode(0xf0ff);
2、String.fromCodePoint()
可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'; // true
// 如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。
3、遍历字符串
用for循环遍历字符串，不可以识别大于oxFFFF的码点
用for...of遍历字符串，可以识别大于oxFFFF的码点
let str = String.fromCodePoint(0x20BB7) + 'abc';
for(let i of str) {
console.log(i);
}
// '𠮷'
// 'a'
// 'b'
// 'c'
4、charAt()
返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
'abc'.charAt(1);
// 'b'
5、normalize()
用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。
'\u01D1'.normalize() === '\u004F\u030C'.normalize(); // true
6、indexOf()
用来确定一个字符串是否包含在另一个字符串中
7、includes()
返回布尔值，表示是否找到了参数字符串。
8、startsWith()
返回布尔值，表示参数字符串是否在原字符串的头部。
9、endsWith()
返回布尔值，表示参数字符串是否在原字符串的尾部。
10、repeat()
返回一个新字符串，表示将原字符串重复n次。
'x'.repeat(3); // 'xxx'
'y'.repeat(0); // ''
11、padStart() / padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
'12'.padStart(10, '0'); // '0000000012'
'23'.padStart(10, 'YYYY-MM-DD'); // 'YYYY-MM-23'
'x'.padEnd(5, 'abcdefg'); // 'xabcd'
12、matchAll()
返回一个正则表达式在当前字符串中的所有匹配
13、模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
let name = 'geek';
let str = `hello ${name}'\n',
how are you?
`;
在模板字符串中使用反引号 `
let str2 = `a\`bcde`;
所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。
$('#list').html(`
<ul>
<li>first</li>
<li>seconde</li>
</ul>
`.trim());
// trim()用于删除空格和换行
模板字符串嵌入js变量或表达式
`abb${3>2 ? 1 : 0}ccd`;
`${ fn() }`;
`${ obj }`; // 大括号中是一个对象时，将默认调用对象的toString方法。
模板字符串，可以嵌套
const tmpl = addrs => `
<table>
${
addrs.map(addr => `
<tr><td>${addr.name}</td></tr>
<tr><td>${addr.age}</td></tr>
`).join('');
}
</table>
`
如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
// 写法一
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!"
14、模板字符串 编译
let template = `
<ul>
<%
for(let i = 0; i<data.names.length; i++) {
<li>
<%= data.names[i] %>
</li>
}
%>
</ul>
`;
// <%...%> 用于放置 JavaScript 代码
// <%= ... %> 用于输出 JavaScript 表达式的结果
封装模板编译函数：
function compile(template) {
const expr = /<%([\s\S]+?)%>/g;
const evalExpr = /<%=(.+?)%>/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;
}
// 测试模板编译函数
let parse = eval(compile(template));
div.innerHTML = parse({names: ['geek', 'lucy', 'david']});
15、标签模板
alert`123`;
// 等同于
alert(123);
16、String.raw()
String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。
String.raw`Hi\n${2+3}!`;
// 返回 "Hi\\n5!"
// String.raw的源码实现
String.raw = function(strings, ...values) {
let output = '';
for(let index = 0; index < values.length; index++) {
output += strings.raw[index] + values[index];
}
output += strings.raw[index];
return output;
}
完！！！
