ES6新特性之字符串的扩展实例分析


Posted in Javascript onApril 01, 2017

本文实例讲述了ES6新特性之字符串的扩展。分享给大家供大家参考,具体如下:

一、ES5字符串函数

concat: 将两个或多个字符的文本组合起来,返回一个新的字符串。
indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
charAt: 返回指定位置的字符。
lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。
match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。
substring: 返回字符串的一个子串,传入参数是起始位置和结束位置。
substr: 返回字符串的一个子串,传入参数是起始位置和长度
replace: 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
search: 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。
slice: 提取字符串的一部分,并返回一个新字符串(与 substring 相同)。
split: 通过将字符串划分成子串,将一个字符串做成一个字符串数组。
length: 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
toLowerCase: 将整个字符串转成小写字母。
toUpperCase: 将整个字符串转成大写字母。

二、ES6新增常用函数

传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

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

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError
'na'.repeat(-0.9) // ""

参数如果是小数,会被取整(向下取整)。
参数是负数或者Infinity,会报错。
参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0。
参数NaN等同于0。

ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

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

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

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

如果省略第二个参数,则会用空格补全长度。

三、模板字符串

1. 多行字符串

传统的JavaScript语言,输出模板通常是这样写的。

$('#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!
`);

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

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

2.嵌入变量

模板字符串中嵌入变量,需要将变量名写在${}之中。

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

3.调用函数

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

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

如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

如果模板字符串中的变量没有声明,将报错。

如果大括号内部是一个字符串,将会原样输出。

`Hello ${'World'}`
// "Hello World"

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
javascript简易画板开发
Apr 12 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
js实现产品缩略图效果
Mar 10 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 #Javascript
ES6新特性之函数的扩展实例详解
Apr 01 #Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 #Javascript
ES6新特性之模块Module用法详解
Apr 01 #Javascript
Vue.js实战之组件之间的数据传递
Apr 01 #Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 #Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
You might like
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
用jscript实现新建word文档
2007/06/15 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python实现多行注释的另类方法
2014/08/22 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
解析Python编程中的包结构
2015/10/25 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python实现复制文件到指定目录
2019/10/16 Python
python如何调用java类
2020/07/05 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技