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> items
   in 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>

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

ES6笔记 -- 字符串拓展

字符串拓展

Unicode 相关

字符串操作

includes(), startsWith(), endsWith()

repeat()

padStart(), padEnd()

模板字符串相关

基本用法

标签模板

猜你喜欢