ES6--字符串的扩展

news/2023/12/9 16:24:18 标签: javascript

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

字符串的遍历接口

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

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

includes()、startsWith()、endsWith()

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

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

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

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

javascript">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遍。

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

如果是小数则会向下取整

javascript">'na'.repeat(2.9); // 'nana'

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

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

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

javascript">'na'.repeat(-0.9); // ''

参数NaN等同于0

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

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

javascript">'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'

padStart()、padEnd()

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

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

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

javascript">'Clearlove'.padStart(5, '12'); // 'Clearlove'

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

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

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

javascript">'Clearlove'.padEnd(10); // 'Clearlvoe '

模板字符串

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

javascript">// 普通字符串
`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?

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

javascript">`\`Hello\` Clearlove!` // `Hello` Clearlove

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

javascript">$('#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'

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


http://www.niftyadmin.cn/n/1575907.html

相关文章

py-18-PROJECT4(下篇)

day04:京淘项目-权限管理子系统-角色模块 1. 角色列表页面呈现 2 1.1. 服务端实现 2 1.1.1. Controller实现 …

Eclipse rap 富客户端开发总结(8) : 发布到tomcat后解决rap编码和字符集的问题

1 、解决 rap 字符集乱码的问题 字符集问题&#xff0c;解决办法&#xff1a; 在plugin.xml - build.properties 中添加 javacDefaultEncoding.. UTF-8 即可解决字符集乱码 2、解决web前台输入乱码问题 使用传统的 字符集过滤器 写一个过滤器类 [java] view plaincopy pri…

NPDP 产品经理认证知识体系

目录 本书共分为7大章&#xff0c;目录如下&#xff1a; 新产品开发战略 组合管理 新产品开发流程 文化、组织与团队 工具与绩效度量 市场研究 产品生命周期管理&#xff08;PLC,Product life cycle&#xff09;

【BIEE】页面跳转以及跳转后返回

报表开发过程中&#xff0c;我们经常会遇到这种问题&#xff1a;知道统计结果&#xff0c;然后根据统计结果去看明细数据很多人可能首先想到的就是钻探&#xff0c;钻探是一种方法&#xff0c;但是不是唯一的办法&#xff0c;可以使用页面跳转完成。下面举个例子页面A现在想根据…

100Mbps和100Mb/s有什么不同

100Mbps 和 100Mb/s 有什么不同 MbpsMbit/s即兆比特每秒。Million bits per second的缩写 传输速率是指设备的的数据交换能力&#xff0c;也叫“带宽”&#xff0c;单位是Mbps(兆位/秒),目前主流的集线器带宽主要有10Mbps、54Mbps/100Mbps自适应型、100Mbps和150Mbps四种。 1Mb…

CyberTeam宣称已攻破视频聊天软件Skype,下一个是游戏平台Steam

本文讲的是CyberTeam宣称已攻破视频聊天软件Skype&#xff0c;下一个是游戏平台Steam&#xff0c;近日&#xff0c;据外媒报道称&#xff0c;一个自称为“CyberTeam”的网络犯罪组织声称策划了一场DDoS攻击活动&#xff0c;致使全球多个国家的Skype服务瘫痪&#xff0c;用户无法…

三数之和(java)

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 例&am…

U盘安装CentOS 7.0图文详解教程

记录下U盘安装CentOS 7.0安装过程&#xff0c;供Linux新手参考。U盘安装Linux简单又环保&#xff0c;推荐大家使用。安装前准备&#xff1a;1、CentOS 7.0 64位系统&#xff1a;CentOS-7.0-1406-x86_64-DVD.isoCentOS-7.0-1406 ISO境像下载地址&#xff1a; http://www.linuxid…

颠覆我的Thread.join()

学而时习之&#xff0c;不亦说乎&#xff01; --《论语》 为什么说是颠覆&#xff1f; 1)任何对象都可以作为锁对象&#xff0c;锁对象的行为都是一样的吗&#xff1f;之前我一直认为锁对象的方法都是定义在Object类中&#xff0c;而所有类都是Object的子类&#xff0c;这些方法…

linux 邮件工具利器sendEmail时效超好

下载&#xff1a;http://caspian.dotconf.net/menu/Software/SendEmail/sendEmail-v1.56.tar.gz 安装方法&#xff1a; 1) Extract the package 解压压缩包tar -zxvf sendEmail-v1.XX.tar.gz2) Copy the sendEmail script to /usr/local/bin 复制命令脚本到/usr/local/bin目录c…
最新文章