专栏首页Web前端开发ES6 字符串扩展

ES6 字符串扩展

一、ES6 模板字符串

传统的 JavaScript 输出模板通常是这样写的:

let firstName = 'Will';
let lastName = 'Smith';
let name = 'My firstName is:' + firstName + ',my lastName is:'+ lastName;

这种写法很不方便,所以 ES6 引入了模板字符串:

let firstName = 'Will';
let lastName = 'Smith';
let name = `My firstName is:${firstName},my lastName is:${lastName}`;

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

// 普通字符串
`Leophen is a man`

// 多行字符串
`Leophen is
a man`

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

上面代码中的模板字符串,都是用反引号(数字1左边那个键)表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

`\`Hello\` Leophen!` // `Hello` Leophen

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

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

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

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还能调用函数。

function fn() {
  return "Hello World";
}
`${fn()}`
// Hello World

 二、ES6 字符串的新增方法(节选)

1、padStart() 和 padEnd()

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

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

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

如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

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

'abc'.padStart(5, '12345')
// '12abc'

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

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

2、startsWith() 和 endsWith()

  • startsWith() :返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith() :返回布尔值,表示参数字符串是否在源字符串的尾部。
let s = 'Hello Leophen'

s.startsWith('Hello'); // true
s.endsWith('Leophen'); // true

如果有第二个参数,则表示搜索的起始位置:

let s = 'Hello Leophen'

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

3、includes()

includes() 返回布尔值,表示是否找到了参数字符串。

var s = 'Hello Leophen';
s.includes('Leophen') // true

如果有第二个参数,同样表示搜索的起始位置:

var s = 'Hello Leophen';
s.includes('Hello', 6) // false

4、repeat()

repeat() 返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'na'.repeat(0) // ""

参数如果是小数,会向下取整。

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

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

'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError

但是如果参数是 0 到 -1 之间的小数,则等同于 0 ,这是因为向下取整了。

'na'.repeat(-0.8) // ""

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

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

三、ES6 关于 Unicode 的表示

ES6 加强了对 Unicode 的支持,允许采用 \uxxxx 形式表示一个字符,其中 xxxx 表示字符的 Unicode 码点。

"\u0061" // "a"

但这种表示法只限于码点在 0000 FFFF 之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。

"\uD842\uDFB7" // "?"

"\u20BB7" // " 7"

上面代码是因为直接在 \u 后面跟上超过 0xFFFF 的数值(比如\u20BB7),JavaScript 会理解成 \u20BB+7。由于 \u20BB 是不可打印字符,只显示空格,后面跟一个7

ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。

"\u{20BB7}" // "?"

"\u{41}\u{42}\u{43}" // "ABC"

四、ES6字符串的遍历器接口

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

let str = 'hello';
for(let key of str){
    console.log(key);
}

输出:
//h
//e
//l
//l
//o

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 七夕将至,我用代码写了一个表白神器!

    七夕节马上就要到了,又到了各位单身汪报复社会的时间了。今年的七夕节,各位单身汪们你们准备好了吗?把电影院的单号座位都订完?晚上去宾馆敲门?用针扎TT?这些老掉牙...

    蓝默空间
  • 《Python入门04》Python字符串的那些“事儿”

    前几天收到小伙伴的留言,说你写的python相关教程意义不大,还不如专门整理《NLP》相关文章供大家参考学习,还有小伙伴说你的python入门怎么不更新...

    ShuYini
  • Spring Boot集成CKEditor 顶

    项目中需要用到富文本编辑器,朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor与CKFinder学习–整合Spr...

    用户2146693
  • 基础服务系列-Centos7 安装Node.js10

    wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

    用户2146693
  • Spark Core源码精读计划5 | 事件总线及ListenerBus

    在讲解SparkContext组件初始化时,第一个初始化的内部组件就是LiveListenerBus,后面的组件很多都会依赖它,这从侧面说明事件总线是非常重要的...

    暴走大数据
  • 正则表达式-零宽断言实践

    处理JSON字符串KEY值中的特殊字符,VALUE中的字符不受影响。 如下所示,替换KEY中的_DOT_为点.,_SUB_为_。

    用户2146693
  • Java Grammar:数据类型

    我们知道,Java是一种 强类型 语言,类型对于Java语言来说非常的重要不言而喻,在Java中,分为 基础数据类型 和 引用数据类型 ,其中基础数据类型分为了...

    Vi的技术博客
  • 使用开源库构建自定义视频体验

    本帖来自VES(Video Engineering Summit)2019的演讲,主要内容是使用开源库构建自定义视频体验(Building A Custom V...

    用户1324186
  • Spark Core源码精读计划6 | AsyncEventQueue与LiveListenerBus

    在上一篇文章中,我们了解了Spark事件总线机制的概况,以及ListenerBus、SparkListenerBus的细节。

    暴走大数据
  • 前端快速入门之概述

    以下是对(前端)可视化工作的并不系统的总结,新手向,主要是想说一下前端如何组成、功能如何实现、资源如何请求,进而说到数据如何显示,并在最后列举了一些十分重要的参...

    ZONGLYN

扫码关注云+社区

领取腾讯云代金券