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 相关文章推荐
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
详解Vue方法与事件
Mar 09 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
详解.vue文件解析的实现
Jun 11 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的4种常见运行方式
2015/03/20 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
优秀团干部个人事迹
2014/05/29 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
导游词之西安骊山
2019/12/03 职场文书