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;
}

---

完！！！