关于前端:ES6新特性4字符串的扩展

6次阅读

共计 2243 个字符,预计需要花费 6 分钟才能阅读完成。

一、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</pre>

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 之间的小数,取整当前等于 -0repeat 视同为 0。

参数 NaN 等同于 0。

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

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

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

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

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

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

三、模板字符串

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"</pre>

正文完
 0