专栏首页前端客栈ES6--字符串的扩展

ES6--字符串的扩展

最近开发小程序,对应ES6是一个很好的应用机会。现在整理下ES6中字符串类型的一些实用扩展,供大家参考。目前主要是参考阮一峰老师的ECMAScript 6 入门

字符串的遍历接口

ES6为字符串添加了遍历接口,使得字符串可以被for..of遍历。

for(let st of 'foo') {
  console.log(st)
}
// 'f'
// 'o'
// 'o'

includes()、startsWith()、endsWith()

ES5中,indexOf()可以一个字符串是否存在另一个字符串中。ES6中又提供了三个方法:

  1. includes(): 返回布尔值,表示是否找个参数字符串。
  2. startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部。
  3. endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部。
let string = 'Hello Clearlove'

string.includes('Clearlove'); // true
string.stattsWith('Hello'); // true
string.endsWith('Clearlove'); // true

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

let string = 'Hello Clearlove'

string.includes('Clearlove', 6); //true
string.starstWith('Hello', 6); false
string.endsWith('Hello', 5); // true

使用第二个参数n时,endsWith()的行为与其他两个方法有所不同。它是针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

repeat

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

'x'.repeat(2); // 'xx'
'Hello'.repeat(2); 'HelloHello'
'na'.repeat(0); ''

如果是小数则会向下取整

'na'.repeat(2.9); // 'nana'

如果repeat的参数是负数或者Infinity,则会报错:

'na'.repeat(-1); // RangError
'na'.repeat(Infinity); // RangError

但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0

'na'.repeat(-0.9); // ''

参数NaN等同于0

'na'.repeat(NaN); // ''

如果repeat的参数是字符串,则会先转换成数字。

'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'

padStart()、padEnd()

字符串自动补充,如果字符串长度不够指定长度 ,会在头部或者尾部补全。padStart()用于在头部补全,padEnd()用于在尾部补全。

`love`.padStart(9, 'Clear'); // 'Clearlove'
'Clear'.padEnd(9, 'love'); // 'Clearlove'

如果原字符串的长度,等于或者大于制定最小长度,则返回原字符串。

'Clearlove'.padStart(5, '12'); // 'Clearlove'

如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

'Clearlove'.padEnd(12, '123456'); // 'Clearlove123'

如果省略第二个参数,默认使用空格补全长度。

'Clearlove'.padEnd(10); // 'Clearlvoe '

模板字符串

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

// 普通字符串
`Clearlove is a boy`

// 多行字符串
`Clearlove is
a boy`

// 字符串嵌入变量
let name = 'Clearlove', time = 'today'
`Hello ${name}, how are you ${time}?` // Hello Clearlove, how are you today?

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

`\`Hello\` Clearlove!` // `Hello` Clearlove

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代码中,所有模板字符串的空格和换行,都是被保留的,比如<ul>标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量,需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性,还能调用函数。

String.raw()

String.raw()方法,当作模板字符串的处理函数,返回已替换变量或执行函数后的字符串。若模板字符串中存在一个斜杠,则会被转义成两个斜杠。若本身为两个斜杠,则不做处理。

let s1 = 'Clear', s2 = 'love'
String.raw`${ s1 + s2 }` // 'Clearlove'

作为函数调用较少出现,就不多做介绍。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浏览器缓存机制浅析--HTTP缓存

    浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非HTTP协议定义的缓存机制,如使用HT...

    Clearlove
  • 多“维”优化——前端高并发策略的更深层思考(转载)

    说到优化,大家在收到“优化指标”任务的时候。通常会做两件事情——分析“优化指标”对应的痛点、寻找解决痛点的技术方案并施行。那这样是否就足够了呢?我的答案是否定的...

    Clearlove
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)

    今天调整项目需求,里面涉及到需要初始化多个百度编辑器。但是遇到这样一个问题,百度编辑器在第一次进入时,编辑器容器未初始化,再次刷新容器初始化成功。 通过UE.i...

    Clearlove
  • Java常量池详解,秒懂各种对象相等操作

    (2)节省运行时间:比较字符串时,== 比equals()快。对于两个引用变量,只用==判断引用是否相等,也就可以判断实际值是否相等。

    Java识堂
  • 如何在Apache上部署多个Wordpress站点

    WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

    彼岸轮回
  • 如何为回归问题,选择最合适的机器学习方法?

    在目前的机器学习领域中,最常见的三种任务就是:回归分析、分类分析、聚类分析。在之前的文章中,我曾写过一篇《sklearn 与分类算法》。那么什么是回归呢?

    用户1737318
  • 如何在Ubuntu 16.04上使用Deployer自动部署Laravel应用程序

    Laravel是一个开源的PHP Web框架,旨在使常见的Web开发任务(如身份验证,路由和缓存)变得更加容易。Deployer是一个开源的PHP部署工具,为许...

    心语花束
  • 深入理解MySQL 5.7 GTID系列(九):实际案例一

    从案例中我们得知是中途开启的GTID,但是留下了很多未开启GTID的BINLOG,从第六部分源码bool MYSQL_BIN_LOG::init_gtid_se...

    wubx
  • 脚本方式一键获取MySQL的用户权限

    日常巡检MySQL的时候,需要看下用户权限是否过大,每次通过show grants操作则很不方便。因此写个脚本。

    二狗不要跑
  • 爱他,就给他做一个表情包吧(内有福利)

    在用社交软件聊天的过程中,难免会遇到很尴尬或者冷场的时候,要是再用文字来表达,就显得太不机智了。如果这时候用一个恰到好处的动图,可以让对话达到死灰复燃的效果。

    知晓君

扫码关注云+社区

领取腾讯云代金券