1.字符串可以通过for…of进行遍历字符.
2.遍历器可以识别大于0xFFFF的码点,传统的for无法识别这样的码点

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);
}
// "𠮷"
  • 允许直接输入U+2028和U+2029

  • UTF-8中对于0xD800到0xDFFF之间的码点,不能单独使用,必须配对使用,而之前的JSON.stringify()可能会返回0xD800到0xDfff之间的单个码点。

  • 模板字符串之中还能调用函数,直接使用${}即可,模板字符串可以嵌套。

const tmpl=addrs=>`
<table>
${addrs.map(addr=>`
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>`).join('')}
</table>`;
const data=[
    {first:'<Jane>',last:'Bond'},
    {first:'last',last:'V'},
]
console.log(tmpl(data));

模板编译:

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

标签模板相当于另一种形式的函数调用:

let a=5;
let b=10;
function tag(s,...value){
    console.log(s,value);
    return "ok"; 
}
tag`Hello,${a-b},vd,${a+b}`;

传入的变量参数放进了argument中:

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals) {
  let result = '';
  let i = 0;
  console.log(literals);
  while (i < literals.length) {
    result += literals[i];
    i++;
    console.log("参数是",arguments);
    if (i < arguments.length) {
      result += arguments[i];
    }
  }
  return result;
}
console.log(msg);

标签模板在各种地方有很大的应用:

//防止注入恶意内容时:
let message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);
    // 将特殊字符替换掉
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 但仍把它们加上.
    s += templateData[i];
  }
  return s;
}
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>
//

//国际化
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
  • 在raw属性中保存的是字符串转义后的结果,如:strings.raw[0] 为 “First line\nSecond line”打印输出 “First line\nSecond line”

  • 模板字符串的限制,对于出现了不合法的转义时(可能由字符集问题导致的),可以返回结果为[undefined,raw:原字符串].

字符串新增方法

  • String.fromCodePoint()
    String.fromCodePoint()可以识别大于0xFFFF的字符,如果有多个参数会合并为一个字符返回。

String.raw()

  • String.raw返回每个斜杆都被转义的字符串(再加一个斜杆),本质上也是一个模板函数。

codePointAt()

对于大于0xFFFF的字符来说,charAt和charCodeAt只能解析两个字节,而codePointAt则可以处理4个字节储存的字符。
对于正确识别字符的方式:

let s = '𠮷a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}

//可用来判断一个字符是两个字节还是四个字节
function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}
is32Bit("𠮷") // true
is32Bit("a") // false

normalize()

对于某些字符存在多种Unicode编码,因此可以标准化:'\u01D1'.normalize() === '\u004F\u030C'.normalize()

判断子串

let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
//支持开始搜索的位置
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

原字符串重复N次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError
'na'.repeat(-0.9) // ""
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

字符串的补全

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'abc'.padStart(10, '0123456789')//'0123456abc'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '
'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"

消除空格

trimStart()只消除头部的空格,保留尾部的空格。trimEnd()也是类似行为。

matchAll用于正则

原文地址:http://www.cnblogs.com/mengyiqwq/p/16795478.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性