当前位置：网站首页>ES6 advanced string processing new features

ES6 advanced string processing new features

2022-08-11 02:25:00 【ZWZhangYu】

文章目录

字符串遍历

ES6 为字符串添加了遍历器接口,使得字符串可以被for…of循环遍历.除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点.

 let str = "qwer安徽"
    for (let value of str) {
    
        console.log(value)
    }

在这里插入图片描述

模板字符串

认识

在日常的开发过程中经常会遇到一些字符串组装的需求,比如一个较长的文本拼接展示,动态组件HTML拼接等等,一般来说我们会通过字符串拼接方式,然后各种修改双引号单引号,不仅书写不便,而且代码最终看起来很不好阅读,ES6中引入了模板字符串可以帮助我们以一种更友好的方式去解决这个问题.

<body>
<p id="p1"></p>
<hr>
<p id="p2"></p>

<script>
    let user = {
    
        name: "Alice",
        address: "安徽合肥"
    }
    let title = "测试模板字符串";
    
    // 字符串拼接方式
    document.getElementById("p1").append("标题：" + title + " 姓名：" + user.name + " 地址：" + user.address)
    // 参数变量方式
    document.getElementById("p2").append(`标题：${
     title} 姓名：${
     user.name} 地址：${
     user.address}`)
</script>

在这里插入图片描述
模板字符串（template string）是增强版的字符串,用反引号（`）标识.它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量.
如果在模板字符串中需要使用反引号,则前面要用反斜杠转义.
模板字符串中嵌入变量,需要将变量名写在${}之中.
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中.

JavaScript 表达式

大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性.

    let a = 1
    let b = 2

    document.getElementById("p3").append(`计算结果：${
     a + b}`)

在这里插入图片描述
模板字符串之中还能调用函数.

    document.getElementById("p4").append(`函数处理：${
     hello(user.name)}`)
    
    function hello(name) {
    
        return "hello " + name
    }

在这里插入图片描述
模板字符串之中可以执行JS脚本

 document.getElementById("p4").append(`执行JS代码：${
     document.getElementById("p1").innerText}`)

字符串新增的方法

includes(), startsWith(), endsWith()

传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6 又提供了三种新方法.

includes()：返回布尔值,表示是否找到了参数字符串.区分大小写.
startsWith()：返回布尔值,表示参数字符串是否在原字符串的头部.
endsWith()：返回布尔值,表示参数字符串是否在原字符串的尾部.

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数,表示开始搜索的位置.

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同.它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束.

repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次.
在这里插入图片描述

padStart(),padEnd()填充函数

ES2017 引入了字符串补全长度的功能.如果某个字符串不够指定长度,会在头部或尾部补全.padStart()用于头部补全,padEnd()用于尾部补全.这个功能很实用,我在开发中遇到很多类似的需求,之前都是自己单独写函数去处理的,现在有了这个更加方便了.

    // 字符串填充
    console.log("abc".padStart(5, "0"))  // 00abc
    console.log("abc".padEnd(5, "0"))    // abc00

padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串.

    // 输出：123456789  如果原字符串超过了填充的长度返回源字符串
    console.log("123456789".padStart(5, "0"))
    // 输出：12345 如果填充的字符串超过了填充最大长度,则截去超出位数的补全字符串
    console.log("123".padEnd(5, "45678"))

at()

at()方法接受一个整数作为参数,返回参数指定位置的字符,支持负索引（即倒数的位置）.

    var str = "qwertyui";
    console.log(str.at(0))  //q
    console.log(str.at(-1))  // i

原网站

版权声明
本文为[ZWZhangYu]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/223/202208110220190968.html