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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
用JS实现选项卡
2020/03/23 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
满月酒答谢词
2014/01/14 职场文书
中药学专业求职信
2014/05/31 职场文书
2015年服务员工作总结
2015/04/08 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
股东协议书范本2016
2016/03/21 职场文书
七年级作文之雪景
2019/11/18 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers