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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
ES6的新特性概览
Mar 10 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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 上传文件的方法(类)
2009/07/30 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
Python列表删除的三种方法代码分享
2017/10/31 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
对Python 语音识别框架详解
2018/12/24 Python
Django实现跨域的2种方法
2019/07/31 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
物流管理应届生求职信
2013/11/07 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python