banner
banner
banner
NEWS LETTER

ES6-字符串

Scroll down

字符的 Unicode 表示法

  • 采用\uxxxx形式表示一个字符(\u0000~\uFFFF)

  • 超范围的字符,必须用两个双字节的形式表示。

  • “\u20BB7” // “7”

  • “\uD842\uDFB7” // “𠮷”

  • “\u{20BB7}” // “𠮷”

js六种方法表字符

  • ‘\z’ === ‘z’ // true
  • ‘\172’ === ‘z’ // true
  • ‘\x7A’ === ‘z’ // true
  • ‘\u007A’ === ‘z’ // true
  • ‘\u{7A}’ === ‘z’ // true

for…of循环遍历

1
2
3
for (let codePoint of 'foo') {
console.log(codePoint)
}

Js 规定有5个字符,不能在字符串里面直接使用,只能使用转义形式。

  • U+005C:反斜杠(reverse solidus)
  • U+000D:回车(carriage return)
  • U+2028:行分隔符(line separator)
  • U+2029:段分隔符(paragraph separator)
  • U+000A:换行符(line feed)

JSON.stringify() 的改造

  • 遇到0xD800到0xDFFF之间的单个码点,或不存在的配对形式,它会返回转义字符串,留给应用自己决定下一步的处理。
  • JSON.stringify(‘\u{D834}’) // “”\uD834””
  • JSON.stringify(‘\uDF06\uD834’) // “”\udf06\ud834””

模板字符串(反引号`标识)

  • 模板字符串中嵌入变量,需要将变量名写在${}之中。
    1
    `${x} + ${y} = ${x + y}`
  • 能调用函数
    1
    `foo ${fn()} bar`

标签模板

1
2
3
4
5
6
7
8
9
10
alert`hello`
// 等同于
alert(['hello'])

let a = 5;
let b = 10;
//先处理参数,之后调用函数
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

拓展

String.fromCodePoint()

  • 从 Unicode 码点返回对应字符

codePointAt()

  • 处理4 个字节储存的字符,返回一个字符的码点。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    let s = '𠮷a';   // 0x20BB7
    s.codePointAt(0) // 20 134071
    s.codePointAt(1) // BB 57271
    s.codePointAt(2) // 7 97

    解决字符串参数位置识别不对:
    1for...of循环
    let s = '𠮷a';
    for (let ch of s) {
    console.log(ch.codePointAt(0).toString(16));
    }

    2、扩展运算符(...)
    let arr = [...'𠮷a']; // arr.length === 2
    arr.forEach(
    ch => console.log(ch.codePointAt(0).toString(16))
    );

    // 测试是否是四个字节
    function is32Bit(c) {
    return c.codePointAt(0) > 0xFFFF;
    }

    is32Bit("𠮷") // true
    is32Bit("a") // false

String.raw()

  • 原有多少斜杠,实际返回原来斜杠的两倍,但肉眼看不出来
  • 示例:
    1
    2
    String.raw`Hi\n${2+3}!`  // 实际返回 "Hi\\n5!",显示的是转义后的结果 "Hi\n5!"
    String.raw`Hi\\n` === "Hi\\\\n" // true

normalize()

  • 将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化

includes() — ES7

  • 含义:判断一个数组或字符串中是否包含一个指定的值
  • 语法:str.includes(searchString, position)
  • 参数:
    • searchString:要查找的字符串
    • position:字符串开始搜索sezrchString的起始位置,默认为0
  • 返回:布尔值,true表示存在

startsWith()

  • 含义: 参数字符串是否在原字符串的头部
  • 返回: 布尔值

endsWith()

  • 含义:参数字符串是否在原字符串的尾部
  • 返回: 布尔值

repeat()

  • 含义:将原字符串重复n次
  • 返回:一个新字符串
  • 示例:’hello’.repeat(2) // “hellohello”
  • 注意:如果参数是小数会向上取整,负数或无穷会报错,0到-1和NaN等于0,字符串会转数字

padStart()用于头部补全长度 — ES8

  • 含义:用另一个字符串填充当前字符串
  • 语法:str.padStart(targetLength, padString)
  • 参数:
    • targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身
    • padString(可选):填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的默认值为 “ “。
  • 返回值:在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

padEnd()用于尾部补全长度 — ES8

  • 含义:用另一个字符串填充当前字符串
  • 语法:str.padEnd(targetLength, padString)
  • 参数:
    • targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身
    • padString(可选):填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的默认值为 “ “。
  • 返回值:在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。
  • 示例:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    'abc'.padStart(10);         // "       abc"
    'abc'.padStart(10, "foo"); // "foofoofabc"
    'abc'.padStart(6,"123465"); // "123abc"
    'abc'.padStart(8, "0"); // "00000abc"
    'abc'.padStart(1); // "abc"

    'abc'.padEnd(10); // "abc "
    'abc'.padEnd(10, "foo"); // "abcfoofoof"
    'abc'.padEnd(6, "123456"); // "abc123"
    'abc'.padEnd(1); // "abc"

trimStart() — ES10

  • 含义:删除字符串开头的空白字符
  • 别名:trimeLeft()
  • 语法:str.trimStart()
  • 返回:一个新字符串

trimEnd() — ES10

  • 含义: 删除字符串尾部的空白字符
  • 别名:trimRight()
  • 语法:str.trimEnd()
  • 返回:新字符串
  • 示例:
    1
    2
    3
    4
    5
    6
    let str = '    a b cd  ';
    str.trimStart(); // 'a b cd '
    str.trimLeft(); // 'a b cd '

    str.trimEnd()
    str.trimRight()

matchAll()

  • 返回: 一个正则表达式在当前字符串的所有匹配,以数组的形式
  • 示例:
    1
    2
    3
    4
    5
    6
    const regexp = /t(e)(st(\d?))/g;
    const str = 'test1test2';

    const array = [...str.matchAll(regexp)];
    console.log(array[0]); // ["test1", "e", "st1", "1"]
    console.log(array[1]); // ["test2", "e", "st2", "2"]

replaceAll(pattern, replacement)

  • 含义:所有匹配的pattern的部分都会被替换为replacement
  • 返回:新字符串
  • 参数:
    • pattern:字符串 或者 带g的正则表达式
    • replacement:函数/字符串,可以带有特殊字符
  • $&:匹配的字符串
  • $`:匹配结果前面的文本
  • $’:匹配结果后面的文本
  • $n:匹配成功的第n组内容,n是从1开始的自然数。这个参数生效的前提是,第一个参数必须是正则表达式
  • $$:指代美元符号$
  • 示例:
    1
    2
    'aabbcc'.replaceAll('b', '.');  // 'aa..cc'
    'aabbcc'.replaceAll(/b/g, '.'); // "aa..cc"

at()

  • 接受一个整数作为参数,返回参数指定位置的字符,支持负索引(即倒数的位置)
其他文章
cover
Node基础
  • 24/10/31
  • 17:15
  • Node
cover
ES6-数组的拓展
  • 24/10/31
  • 15:54
  • ES6
目录导航 置顶
  1. 1. 字符的 Unicode 表示法
  2. 2. js六种方法表字符
  3. 3. for…of循环遍历
  4. 4. Js 规定有5个字符,不能在字符串里面直接使用,只能使用转义形式。
  5. 5. JSON.stringify() 的改造
  6. 6. 模板字符串(反引号`标识)
  7. 7. 标签模板
  8. 8. 拓展
    1. 8.1. String.fromCodePoint()
    2. 8.2. codePointAt()
    3. 8.3. String.raw()
    4. 8.4. normalize()
    5. 8.5. includes() — ES7
    6. 8.6. startsWith()
    7. 8.7. endsWith()
    8. 8.8. repeat()
    9. 8.9. padStart()用于头部补全长度 — ES8
    10. 8.10. padEnd()用于尾部补全长度 — ES8
    11. 8.11. trimStart() — ES10
    12. 8.12. trimEnd() — ES10
    13. 8.13. matchAll()
    14. 8.14. replaceAll(pattern, replacement)
    15. 8.15. at()
请输入关键词进行搜索