关于ES6字符串的扩展详解

 更新时间:2022年08月15日 11:31:32   作者:RiemannHypothesis  
es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,下面这篇文章主要给大家介绍了关于ES6字符串扩展的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、字符串的扩展

字符的 Unicode 表示法

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

"\u0061"
// "a"

字符串的遍历器接口

ES6 为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被for...of循环遍历。

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

模板字符串

传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

二、字符串的新增方法

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

实例方法:repeat()

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

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

实例方法:padStart(),padEnd()

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

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

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

实例方法:trimStart(),trimEnd()

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

总结

到此这篇关于ES6字符串扩展的文章就介绍到这了,更多相关ES6字符串扩展内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 简单谈谈gulp-changed插件

    简单谈谈gulp-changed插件

    这篇文章主要介绍了关于gulp-changed插件的相关资料,文中介绍的还是相对详细的,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • httpclient模拟登陆具体实现(使用js设置cookie)

    httpclient模拟登陆具体实现(使用js设置cookie)

    最简单的方法就是通过得到的cookie定制一个httpclient,感兴趣的朋友可以了解下本文
    2013-12-12
  • js获取checkbox值的方法

    js获取checkbox值的方法

    这篇文章主要介绍了js获取checkbox值的方法,涉及js针对节点的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 微信小程序全局数据共享和分包图文详解

    微信小程序全局数据共享和分包图文详解

    全局数据共享是为了解决组件之间数据共享的问题,下面这篇文章主要给大家介绍了关于微信小程序全局数据共享和分包的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • JavaScript DOM事件(笔记)

    JavaScript DOM事件(笔记)

    这篇文章主要介绍了JavaScript DOM事件(笔记) ,需要的朋友可以参考下
    2015-04-04
  • 浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题

    浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题

    下面小编就为大家带来一篇浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript实现下拉菜单的显示隐藏

    JavaScript实现下拉菜单的显示隐藏

    这篇文章主要为大家详细介绍了JavaScript实现下拉菜单的显示隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解JavaScript面向对象实战之封装拖拽对象

    详解JavaScript面向对象实战之封装拖拽对象

    本文主要介绍了JavaScript如何用面向对象的方式封装拖拽对象,通过3种方式来实现,帮助读者更好的理解其原理
    2021-06-06
  • js实现点赞按钮功能的实例代码

    js实现点赞按钮功能的实例代码

    这篇文章主要介绍了js实现点赞按钮功能,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • TypeScript中遍历对象键的方法

    TypeScript中遍历对象键的方法

    在日常的TypeScript开发中,经常需要遍历对象的键来执行各种操作,,在本文中,我们将深入研究这个问题,并提供几种解决方案,以便在遍历对象键时更安全、更灵活地操作,文中有详细的代码讲解,需要的朋友可以参考下
    2023-11-11

最新评论