zoukankan      html  css  js  c++  java
  • ECMAScript 6 -- 字符串的扩展

    字符串的遍历器接口:

    字符串可以被for...of循环遍历。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        for (let codePoint of 'foo') {
            console.log(codePoint)
        }
    </script>
    </body>
    </html>

    这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        var text = String.fromCodePoint(0x20BB7);
        for (let i of text) {
            console.log(i);
        }
    </script>
    </body>
    </html>

    at()

    ES5对字符串对象提供charAt方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。

    normalize()

    normalize方法可以接受一个参数来指定normalize的方式,参数的四个可选值如下。

    • NFC,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。
    • NFD,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。
    • NFKC,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,normalize方法不能识别中文。)
    • NFKD,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。

    includes(), startsWith(), endsWith()

    • includes():返回布尔值,表示是否找到了参数字符串。
    • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
    • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        var s = 'Hello world!';
    
        s.startsWith('Hello') // true
        s.endsWith('!') // true
        s.includes('o') // true
    
        console.log(s.startsWith('Hello'));
        console.log(s.endsWith('!'));
        console.log( s.includes('o'));
    </script>
    </body>
    </html>

    结果:

    true

    true

    true

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        var s = 'Hello world!';
        console.log(s.startsWith('world', 6) );
        console.log(s.endsWith('Hello', 5));
        console.log( s.includes('Hello', 6));
    </script>
    </body>
    </html>

    endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

    结果:

    true

    true

    false

    repeat()

    repeat方法返回一个新字符串,表示将原字符串重复n次。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        console.log( 'hello'.repeat(2));
    </script>
    </body>
    </html>

    结果:

    hellohello

    padStart(),padEnd()

    ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        console.log('x'.padStart(5, 'ab'));
        console.log('x'.padStart(4, 'ab') );
        console.log('x'.padEnd(5, 'ab'));
        console.log('x'.padEnd(4, 'ab') );
    </script>
    </body>
    </html>

    结果:

    ababx

    abax

    xabab

    xaba

    模板字符串

    模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        // 字符串中嵌入变量
        var name = "Bob", time = "today";
        console.log(`Hello ${name}, how are you ${time}?`);
    </script>
    </body>
    </html>

    结果:

    Hello Bob, how are you today?

    引用模板字符串本身,在需要时执行,可以像下面这样写:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        // 写法一
        let str = 'return ' + '`Hello ${name}!`';
        let func = new Function('name', str);
        func('Jack') // "Hello Jack!"
        console.log(func('Jack'));
    
        // 写法二
        let str1 = '(name) => `Hello ${name}!`';
        let func1 = eval.call(null, str1);
        console.log(func1('Jack'));
    
    </script>
    </body>
    </html>

    结果:

    Hello Jack!

    Hello Jack!

  • 相关阅读:
    ASPxGridView控件的基本属性
    未整理笔记
    ASPxGridView中Command列自定义按钮点击事件概要
    Cookie的使用
    ASPxGridView行的选中和行的焦点
    改变“骨感”,让OKR变得“丰满”
    高成就者的5个共同点
    项目的风险管理
    实际执行动作对OKR目标落地的重要性
    13种公认的高绩效习惯
  • 原文地址:https://www.cnblogs.com/androidsuperman/p/6892934.html
Copyright © 2011-2022 走看看