【ES6学习】字符串的一些扩展方法(一)(冷门的一些知识点)

9 篇文章 0 订阅

1.at()

S5 对字符串对象提供了 charAt 方法 ,返回字符串给定位置的字符。该方法不能识别码点大于 OxFFFF 的字符。目前,有 一个提案提出字符串实例的 at 方法 可以识 Unicode 编号大于 Ox FF FF 的字符,返回正确的字符。

2.normalize()

在这里插入图片描述这两种表示方法在视觉和语义上都等价 ,但是 JavaScript 无法识别。

'\u01D1 ' === '\ u004F\u030C ' //false 
'\u01D1 '.length // 1 
'\u004F\u030C '.length // 2 

上面的代码表示, JavaScript 将合成字符视为两个字符,导致两种表示方法不等价。
ES6 为字符串实 提供了 normalize 方法 用来将宇符的不同表示方法统 为同样的形式,这称为 Unicode 正规化。

'\u01D1'.normalize() === '\u004F\u030C'.normalize () 
// true

normalize 方法可以接受 一个参数来指定 normalize 的方式 ,参数的 4个可选值如下

  • NFC,默认参数,表示“标准等价合成”, 返回多个简单字符的合成字符 所谓的“标准等价”指的是视觉和语义上的等价。
  • NFD ,表示 标准等价分解,即在标准等价 前提下 返回合 字符分解出 多个简单字符
  • NFKC ,表示“兼容等价合成”,返回合成字符, 所谓“兼容等价”指的是语义上等价,但视觉上不等价,比如“囍”和”喜喜“(这只是举例 normalize 方法并不能识别中文)
  • NFKD ,表示“兼容等价分解”,即在兼容等价的前提下,返回合成字符分解出的多个简单字符。
'\u004F\u030C'.normalize('NFC').length //1 
'\u004F\u030C'.normalize('NFD').length // 2

上面的代码表示, NFC 参数返回字符的合成形式, NFD参数返回字符的分解形式.
不过 normalze方法目前不能识别3个或 3个以上字符的合成。这种情况下 ,还是只能使用正则表达式, 通过 Unicode 编号区 判断。

3. includes ()、 startsWith()、endsWith()

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

  • includes () :返回布尔值,表示是否找到了参数字符串
  • starts With(): 返回布尔值 表示参数字符串是否在源字符串的头部。
  • ends With():返回布尔值, 表示参数字符串是否在源字符串的尾部。
var s = 'Hello world ! '; 
s.startsWith (' Hello ') // true 
s.endsWith ('!') // true 
s.includes ('。'/ / true

这三个方法都支持第二个参数, 表示开始搜索的位置

var s = 'Hello world ! '; 
s.startsWith ( 'world ', 6) //true 
s.endsWith ( 'Hello ', 5) // true 
s.includes (' Hello ', 6) // false

上面的代码表示,使用第二个参数n时, endsWith 的行为与其他两个方法有所不同。
它针对前n个字符,而其他两个方法针对从第n个位置到字符串结束位置之间的字符。

4.repeat()

repeat 方法返回一个新字符串,表示将原字符串重复 n次。

'x'.repeat (3 ) // ” xxx ” 
'hello'.repeat(2 ) // ” hellohello” 
'na'.repeat(O) // ”” 

参数如果是小数, 会被取整。

'na'.repeat(2 . 9) // ” nana ” 

如果 repeat 的参数是负数或者 Infinity ,会报错。

'na'.repeat (Infinity) 
// RangeError 
'na'.repeat (-1) 
// RangeError 

但如果参数是0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。 到-1 之间0的小数取整以后等于-0, repeat 视同为0

'na'.repeat(-0.9) // ”” 

参数 NaN 等同于0

'na'.repeat (NaN) // ””

如果 repeat 的参数是字符串 则会先转换成数字

'na'.repeat ( ' na ' ) // ”” 
'na'.repeat ( ' 3 ' ) // ” nanana ”

5. padStart()、 padEnd()

ES2017 引入了字符串补全长度的功能。 如果某个字符串不够指定长度,会在头部或尾部补全。padStart() 用于头部补全, padEnd () 用于尾部补全。

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

上面的代码中 padStart和 padEnd 分别接受两个参数,第 一个参数用来指定字符串的最小长度,第二 个参数则是用来补全的字符串。

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

' xxx '.padStart(2,'ab ') / / ’xxx’ 
' xxx '.padEnd(2,'ab ') // ’xxx’

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

' abc '.padStart (10 ,'0123456789') 
// ’ 0123456abc ’

如果省略第二个参数, 会用空格来补全

'x'.padStart(4) // ’   x’ 
'x'.padEnd(4) // ’x   ’

padStart 的常见用途是为数值补全指定位数, 下面的代码将生成 10 位的数字符串

'1'.padStart(10,'0' ) // ” 0000000001 ” 
'12'.padStart(1O,'0' )// ” 0000000012 ” 
'123456'.padStart(10, '0' )  // ” 0000123456”

另一个用途是提示字符串格式

'12'.padStart(10,'YYYY-MM-DD') // ” YYYY-MM-12 ” 
'09-12'.padStart(10,'YYYY-MM-DD')// ” YYYY-09-12 ”
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值