ES6------第四天(字符串的扩展前部分)

最新推荐文章于 2024-10-10 10:50:43 发布

weixin_33939843

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量86

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/yj1993/blog/1584544

版权

2019独角兽企业重金招聘Python工程师标准>>>

字符串的扩展

1.字符的Unicode标示法

(1)将码点放入大括号，就能正确解读ES5超出范围的字符(\u0000~\uFFFF)

(2)js共有6种方法可以表示一个字符

'\z' === 'z'
'\172' === 'z'
'\x7A' === 'z'
'\u007A' === 'z'
'\u{7A}' === 'z'

2.codePointAt()

(1)ES5中charCodeAt()的优化

(2)正确处理4个字节存储的字符，返回一个字符的码点

(3)codePointAt(字符在字符串中的位置[从零开始])

(4)测试一个字符是由2个字节还是由4个字节组成的最简单的方法

3.String.fromCodePoint()

(1)ES5中String.fromCharCode()的优化

(2)识别大于0xFFFF的字符

(3)如果有多个参数，它们会被合并成一个字符串返回

(4)定义在String对象上

4.字符串的遍历器接口

(1)遍历字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">

        for(let codePoint of 'yang'){
            console.log(codePoint);
            /*
            * y
            * a
            * n
            * g
            * */
        }

    </script>

</head>
<body>

</body>
</html>

(2)可以识别大于0xFFFF的码点

5.at()

(1)ES5中charAt()的优化

(2)识别Unicode编号大于0xFFFF的字符，返回正确的字符

(3)通过垫片库实现(ps: 垫片库是啥？)

6.normalize()

(1)用来将字符的不同表示方法统一成同样的形式，称为Unicode正规化

(2)normalize('指定normalize的方式')

NFC 默认参数返回字符的合成形式
NFD 标准等价分解返回字符的分解形式
NFKC 兼容等价合成
NFKD 兼容等价分解

(3)目前不能识别三个或者三个以上字符的合成

7.includes()/startsWith()/endsWith()

(1)includes('要搜索的字符串', '开始搜索的位置到结尾') 返回布尔值，表示是否找到了参数字符串

(2)startsWith('要搜索的字符串', '开始搜索的位置到结尾') 返回布尔值，表示参数字符串是否在原字符串的头部

(3)endsWith('要搜索的字符串', '前n个字符到开始搜索的位置') 返回布尔值，表示参数字符串是否在原字符串的尾部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">
        let str = 'hello world';
        console.log(str.startsWith('world', 6));    // true
        console.log(str.endsWith('hello', 5));      // true
        console.log(str.includes('hello', 6));      // false
    </script>

</head>
<body>

</body>
</html>

8.repeat()

(1)返回一个新字符串，表示将原字符串重复n次

(2)如果参数是小数，会被取整

(3)参数不能是负数或者Infinity

(4)如果参数是-1~0,则转换为0

(5)如果参数是NAN，则转换为0

(6)如果参数是字符串，则先转换为数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">
        console.log('hello'.repeat(2));             // hellohello
        console.log('hello'.repeat(2.9));           // hellohello
       // console.log('hello'.repeat(Infinity));      // 报错 Invalid count value
        console.log('hello'.repeat(-0.9));          // 返回空
        console.log('hello'.repeat(NaN));           // 返回空
        console.log('hello'.repeat('3'));           // hellohellohello
    </script>

</head>
<body>

</body>
</html>

9.padStart()/padEnd()

(1)padStart('指定字符串的最小长度', '用来补全的字符串') 如果字符串不够指定长度，用于在头部补全

(2)padEnd('指定字符串的最小长度', '用来补全的字符串') 如果字符串不够指定长度，用于在尾部补全

(3)入股原字符串的长度等于或大于指定的最小长度，则返回原字符串

(4)如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则截取超出位数的补全字符串

(5)如果省略第二个参数，默认使用空格补全长度

(6)padStart()主要用途是为数值补全指定位数

(7)padStart()另一个用途是提示字符串格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">

        console.log('yang'.padStart(8, 'jiao'));            // jiaoyang
        console.log('yang'.padEnd(8, 'jiao'));              // yangjiao
        console.log('yang'.padStart(4, 'jiao'));            // yang
        console.log('yang'.padStart(10, '123456789'));      // 123456yang
        console.log('yang'.padStart(8));                    //     yang
        console.log('1'.padEnd(10, '0'));                   // 1000000000
        console.log('12'.padStart(10, 'YYYY-MM-DD'));       // YYYY-MM-12

    </script>

</head>
<body>

</body>
</html>

10.模板字符串

(1)增强版的字符串，用反引号(`)标识，可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

(2)如果在模板字符串中需要使用反引号，则前面要用反斜杠转义

(3)使用模板表示多行字符串，所有的空格和缩进都会被保留在输出之中

(4)模板字符串中嵌入变量，需要将变量名写在${}之中

(5)${'任意的js表达式、可以进行运算、可以引用对象属性、可以调用函数'}

(6)模板字符串中的变量没有声明，将报错

(7)模板字符串可以嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">

        let str = `In js`;
        console.log(str);       // In js

        let str1 = `js
this is lupeng`;
        console.log(str1);  /*js
                            this is lupeng*/

        let name = 'yangjiao', time = 'today';
        let str2 = `Hello ${name}, how are you ${time}`;
        console.log(str2);      // Hello yangjiao, how are you today

        let x = 1;
        let y = 2;
        let result = `${x} + ${y} = ${x + y}`;
        console.log(result);    // 1 + 2 = 3

        function fun(){
            return 'Hello'
        }
        let str3 = `${fun()}`;
        console.log(str3);       // Hello


    </script>

</head>
<body>

</body>
</html>

转载于:https://my.oschina.net/yj1993/blog/1584544