ES6笔记 -- 字符串拓展

字符串拓展

Unicode 相关

• JS 允许使用/uxxxx的Unicode方式显示字符, 但是只限于码点在/u0000~/uFFFF之间, 超过该范围的码点必须用双字节形式表示
• ES6 中, 将码点放入大括号内, 就可以解读
• JS 不能处理4个字节的字符, 字符串长度会被误判为2
• ES6 提供了codePointAt方法, 能够正确处理 4 个字节储存的字符
• 但是该方法在返回 4 个字节的字符串时, 依旧会返回两个参数, 第一个为正确解读的码点, 第二个为后两个字节的码点, 所以在多个包含 4 个字节的字符串时, 需要使用for...of循环
• 同样的, 将 4 个字节的码点转换成字符串, ES6 提供了String.fromCodePoint()方法

字符串操作

• ES6 为字符串添加了遍历器接口, 使其可以被for...of循环遍历, 相对传统的for, 其优势在于可以识别大于/uFFFF的码点

includes(), startsWith(), endsWith()

• 这三个方法可以确定字符串是否包含在另一个字符串中

  • includes()方法表示是否找到了参数字符串.
  • startsWith()方法表示参数字符串是否为原字符串的首位
  • endsWith()方法表示参数字符串是否为原字符串的尾位
  • 三个方法的第一个参数为匹配字符串
  • 前两个方法第二个参数为起始搜索位置(从 0 开始)
  • endsWith()方法第二个参数为原字符串从左到右截取后剩下的长度

  let s = 'Hello world!';s.startsWith('world', 6) // true
  s.endsWith('Hello', 5) // true
  s.includes('Hello', 6) // false

repeat()

• repeat()方法返回一个新字符串, 其接收一个number类型参数, 表示重复次数

  • 该参数不能为小于等于 -1 的负数或者Infinity
  • 如果负数大于 -1, 则视为0
  • 如果是字符串, 则会先转换为数字
  • 其他的均视为0

  'x'.repeat(3) // "xxx"

padStart(), padEnd()

• 这两个方法用于补全字符串

• 当字符串长度不够指定长度时, 会在头部或尾部补全

• 该方法接收两个参数

  • 第一个是指定字符串长度,
  • 第二个是用来补全的字符串, 该参数不填默认为空格

• 当字符串长度加上补全字符串超过指定长度时, 将截取超出位数的补全字符串

• 该方法一般用在数值补全指定位数

  '1'.padStart(10, '0') // "0000000001"
  '12'.padStart(10, '0') // "0000000012"
  '123456'.padStart(10, '0') // "0000123456"

模板字符串相关

基本用法

• 语法

  • 模板字符串定义在两个反引号( ` )之间,
  • 它可以当做普通字符串使用, 也可以定义多行字符串, 或者在字符串中嵌入变量
  • 变量写在${}之中, 除了能调用变量还能引用对象属性, 函数和进行简单的运算
  • 如果需要使用反引号, 则需要用反斜杠  转义
  • 模板字符串默认会保留空格与换行, 如果不需要可以用trim()方法消除

  $('#result').append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale!
  `);

标签模板

• 模板字符串还可以当做模板标签

• 当模板字符串里为不包含变量的简单字符串, 数字等时, 函数会将模板字符串当做参数来处理

  • 该用法不能代替原来函数的调用方式, 这里只是介绍使用方法, 原因在下面解释

  alert`'abc'123`
  // 'abc'123

• 当模板字符串里包含变量时, 会有以下解析

  • 将被变量( 即${}标识 )分开的普通字符串放进数组并当做第一个参数

  • 变量被从左到右依次解析并依次放入第二, 第三...第n个参数

    tag`Hello ${ a + b } world ${ a * b }`;
    // 相当于 tag(['Hello ', ' world ', ''], 15, 50);

  • 需要注意的是, 使用这种传参方式

    • 第一个参数永远是数组
    • 数组里有一个raw属性, 该属性保存的是转义后的原字符串, 所以该方式不能取代传统函数调用方式
    • 数组里的元素个数永远等于参数个数
    • 函数参数至少为两个(数组元素同), 如果只传一个变量, 则数组的两个元素为空
    • 如果用这种方式传递字符串, 必须包含在单引号 ( ' )内, 否则会当做变量处理
    • 通常这样做函数只声明一个参数, 传递的变量通过arguments方法来拿

  • 下面一个复杂的案例可以涵盖以上内容

    let total = 30;
    let msg = passthru`The total is ${total} (${total*1.05} with tax)`;function passthru(literals) {let result = '';let i = 0;// 这里 literals 与 arguments 长度一致while (i < literals.length) {// 这里 i++ 是使下面 arguments 直接从第二个参数拿起result += literals[i++];if (i < arguments.length) {result += arguments[i];}}return result;
    }msg // "The total is 30 (31.5 with tax)"

  • 通常标签模板重要应用是用来过滤 HTML 字符串, 防止用户输入恶意内容

    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]);// Escape special characters in the substitution.s += arg.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");// Don't escape special characters in the template.s += templateData[i];}return s;
    }let sender = '<script>alert("abc")</script>'; // 恶意代码
    let message = SaferHTML`<p>${sender} has sent you a message.</p>`;console.log(message)
    // <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

    其他的需要过滤转换的都可以使用标签模板