字符串拓展

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
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"
'x'.repeat(3) // "xxx"
padStart(), padEnd()
  • 这两个方法用于补全字符串
  • 当字符串长度不够指定长度时, 会在头部或尾部补全
  • 该方法接收两个参数
  • 第一个是指定字符串长度,
  • 第二个是用来补全的字符串, 该参数不填默认为空格
  • 当字符串长度加上补全字符串超过指定长度时, 将截取超出位数的补全字符串
  • 该方法一般用在数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
'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!
`);
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);
标签模板
  • 模板字符串还可以当做模板标签
  • 当模板字符串里为不包含变量的简单字符串, 数字等时, 函数会将模板字符串当做参数来处理
  • 该用法不能代替原来函数的调用方式, 这里只是介绍使用方法, 原因在下面解释
alert`'abc'123`
// 'abc'123
alert`'abc'123`
// 'abc'123
  • 当模板字符串里包含变量时, 会有以下解析
  • 将被变量( 即${}标识 )分开的普通字符串放进数组并当做第一个参数
  • 变量被从左到右依次解析并依次放入第二, 第三...第n个参数
tag`Hello ${ a + b } world ${ a * b }`;
// 相当于 tag(['Hello ', ' world ', ''], 15, 50);
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)"
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, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");

    // 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><script>alert("abc")</script> has sent you a message.</p>
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, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");

    // 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><script>alert("abc")</script> has sent you a message.</p>

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