ES6之字符串的扩展

作者: kim
来源: kimshareclub微信公众号

已经有一段时间没更新关于ES6的知识点了,主要还是因为时间有点紧,小编现在即沉迷于工作,也在坚持运动,最最最最重要的还是少了点写作的动力。但是不管怎么样,每周至少还是会更新一篇,内容不限。今天接着讲ES6中对字符串的扩展知识点。

判断某字符串是否包含在另外字符串中

会JS的兄跌应该知道原生的JavaScript使用的是indexOf()方法来判断字符串中是否包含某字符串。具体的用法如下:string.indexOf(‘str’) 如果返回-1说明在string中找不到str字符串

ES6对字符串新增了includes()\startsWith()\endsWith()方法,用来判断某字符串是否包含在另外字符串中:
这里写图片描述

由以上代码得知:
1.1、如果只有一个参数,则判断完整的原字符串中是否包含了某字符串

1.2、如果有两个参数,第一个参数为需要判断的字符串,第二个参数为原字符串从那个位置开始进行判断,特别需要注意的是:endsWith(arg,index)不包含index,它判断的是索引在index之前的原字符串以arg结尾,而includes(arg,index)和startsWith(arg,index)是与索引从index开始的原字符串进行判断

ES6中的repeat()

ES6中的repeat方法是对原字符串重复后,返回新的字符串: str.repeat(arg) arg为字符串重复的次数:
这里写图片描述

从上面的代码得知:

2.1、如果arg为小数,则需要先取整

2.2、如果arg为负数或者Infinity,则会报错,但不影响上面执行的代码

2.3、如果arg为0到-1之间的小数,则会等同于0

2.4、如果arg为NaN也会视为0

2.5、如果arg为非数字,则需要转为数字

ES6中的模板字符串

ES6中的模板字符串也是使用的比较多的一个新特性,它的写法较简洁方便:
这里写图片描述
这里写图片描述
这里写图片描述
由以上代码得知:

3.1、原生JavaScript中的模板字符串需要"“或’‘或.join(’’).join(”")进行拼接

3.2、ES6中使用反引号(``)包裹字符串,字符串可换行,可嵌入变量。变量名必须以${…}这种格式才被解析,它会保留换行、缩进、空格符

3.3、如果模板字符串中有使用反引号,则需要使用反斜杠转义

3.4、模板字符串中的花括号里可以是任意的Js表达式,可以进行运算,以及引用对象属性

3.5、模板字符串之中可以调用函数(执行函数)

3.6、如果花括号里不是字符串则需要先转为字符串,如对象属性不是字符串则默认调用.toString()方法

3.7、如果花括号中是字符串,则会原样输出

3.8、如果花括号里的变量没有声明则会报错

3.9、模板字符串可嵌套使用(必须是在花括号内才可正常嵌套)

ES6中字符串遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以被for…of循环遍历:
这里写图片描述
以上代码得知:

4.1、字符串可以被for…of循环遍历,打印的是字符而不是索引

4.2、for…of可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点

总结

今天只讲到了ES6中对字符串扩展的4个知识点,其实还有:

字符的Unicode的表示法

codePointAt() – 正确处理4个字节储存的字符,返回一个字符的码点

String.fromCodePoint() – 用于从码点返回对应字符

今天就单纯的讲了常用到的一些新特性,如果需要了解关于字符串的其他新特性可以自行去查阅

往期精彩

⊙一款免费在线高效作图工具,要不要了解一下

⊙ 如何优雅的实现前端国际化

⊙ 深入学习ES6【第三章】

⊙ 深入学习ES6【第二章】

⊙ 深入学习ES6【第一章】

⊙ 一文读懂http缓存(超详细)

⊙ 一款免费观看vip会员视频神器

扫码关注更多精彩内容

这里写图片描述

### ES6 模板字符串传参 在 JavaScript 中,ES6 引入了模板字符串的功能,允许更方便地创建多行字符串以及嵌入表达式。当涉及到向模板字符串传递参数时,可以使用 `${expression}` 的形式将变量或表达式的值插入到字符串中[^2]。 对于简单的插值需求: ```javascript const name = "Alice"; const greeting = `Hello, ${name}`; console.log(greeting); // Hello, Alice ``` 除了基本的数据绑定外,在某些场景下可能还需要处理逻辑判断或者循环结构等内容。由于标准的模板字符串并不直接支持这些功能,因此可以通过定义自定义标签函数的方式来扩展其能力[^3]。 下面是一个带有条件渲染的例子: ```javascript function conditionalTag(strings, ...values) { let result = ''; values.forEach((value, index) => { if (value !== undefined && value !== null && value !== '') { result += strings[index] + value; } else { result += strings[index]; } }); return result + strings[strings.length - 1]; } let user = { name: 'Bob', age: '' }; let bio = conditionalTag`Name: ${user.name}, Age: ${user.age}`; console.log(bio); // Name: Bob, ``` 此例子展示了通过构建一个名为 `conditionalTag` 的标签函数实现了仅当给定属性存在有效值时才将其加入最终输出的能力。 #### 处理复杂情况下的数据展示 考虑到更为复杂的业务逻辑,比如列表项遍历,则通常会结合其他库(如 lodash 或者专门的模板引擎)完成此类任务;不过也可以尝试编写自己的解决方案来满足特定的需求。 例如,这里给出了一种模拟 Mustache 和 Nunjucks 风格语法的方式来进行书籍集合的渲染: ```javascript var myBooks = [ { title: 'JavaScript The Good Parts', author: 'Douglas Crockford' }, { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' }]; function hashTemplate(literals, ...placeholders) { const template = literals.join('${}'); placeholders.forEach((placeholder, i) => template.replace(`#${i}`, placeholder)); // 此处简化处理,实际应解析并执行完整的模板指令集 return eval('`' + template.replaceAll('#{', '${') + '`'); } var libraryHtml = hashTemplate` <ul> #for book in ${JSON.stringify(myBooks)} <li><i>${book.title}</i> by ${book.author}</li> #/for </ul>`; console.log(libraryHtml); /* 输出类似于: <ul> <li><i>JavaScript The Good Parts</i> by Douglas Crockford</li> <li><i>Elegant JavaScript</i> by Marijn Haverbeke</li> </ul>*/ ``` 上述代码片段演示了一个基于纯虚构模板语言的概念验证版本,其中包含了对数组元素迭代的支持。需要注意的是这只是一个简化的实现方式,并未完全遵循任何现有的模板规范。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值