Web前端之路让前端飞Web 前端开发

es6字符串扩展

2017-09-11  本文已影响12人  AlanV
  //1.字符的Unicode表示法

console.log("\u0061");//这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。

console.log("\uD842\uDFB7");

//超过的不可打印显示空格,则打印了空格+7
console.log("\u20bb7");
//加大括号识别
console.log("\u{20bb7}");

// 大括号表示法与四字节的 UTF-16 编码是等价的

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

// 2.codePointAt()字符以UTF-16的格式储存,每个字符固定为2个字节。对于那些需要4个字节储存的字符(Unicode码点大于0xFFFF的字符),JavaScript会认为它们是两个字符。

var s="𠮷";

console.log(s.length);

// s.chatAt(0)
// s.chatAt(1)
//无法读取该字符串
s.charCodeAt(0)
s.charCodeAt(1)
//只能返回前两个字节和后两个字节的值

//codePointAt则可以返回正常的码点值,而访问后两个字节的话,和charCodeAt的方法是一样的,
var b="𠮷a";
//直接返回正确的16进制编码,在第2的时候才会打印到字符串a,因此,这个方法也是不正确的,我们后面用到了 for...of的方法来解决
b.codePointAt(0);
b.codePointAt(1);
b.codePointAt(2);
for (let ch of b) {
  console.log(ch.codePointAt(0).toString(16));
}
//会正确的打印
// 20bb7
// 61
//codePointAt方法返回的是码点的十进制值,如果想要十六进制的值,可以使用toString方法转换一下。
b.codePointAt(0).toString(16) // "20bb7"

// codePointAt方法用来测试字符串是否为2个字节还是四个字节还是可以的
function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("𠮷") // true
is32Bit("a") // false

// 3.String.fromCodePoint()

// ES5中的String.fromCharCode()不能识别码点大于0xFFFF;因此,ES6有了个方法 String.fromCodePoint(),来识别超过的可以识别;

// 注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。


// 4.字符串的遍历接口

// es6添加了方法,使得可以遍历字符串,这个遍历器还可以识别码点大于0xffff的
for ( let codePoint of "foo") {
    console.log(codePoint);
}

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "𠮷"

// 5.在es6的提案中有at方法来替代之前的charAt的方法,来可以识别超过0xffff的字符,这个方法还不行呀;

'abc'.charAt(0) // "a"
'𠮷'.charAt(0) // "\uD842"

// 'abc'.at(0)
 // "a"
// '𠮷'.at(0)
// "𠮷"


// 6.normalize() ,用来将简单的码点可以不让他们合成,从而拆解
// normalize方法可以接受一个参数来指定normalize的方式,参数的四个可选值如下。
//
// NFC,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。
// NFD,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。
// NFKC,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,normalize方法不能识别中文。)
// NFKD,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。

'\u004F\u030C'.normalize('NFC').length // 1
'\u004F\u030C'.normalize('NFD').length // 2

// 7.includes(), startsWith(), endsWith()

// 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法,这个三个方法都支持第二个参数来从某个位置开始搜索
// includes():返回布尔值,表示是否找到了参数字符串。
// startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
// endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

// 8.repeat方法,返回新的字符串然后重复N次;参数是小数会向下取整,如果repeat的参数是负数或者Infinity,会报错。
//字符串会自动转数字,NaN则默认为0,0到1由于向下取整,也是0;
"na".repeat(2.9);//nana
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

// 9.padStart(),padEnd()
// ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
// 如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
// 如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
// 如果省略第二个参数,默认使用空格补全长度。
// padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。
// 另一个用途是提示字符串格式。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

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

// 10.字符串模板。。。。

上一篇下一篇

猜你喜欢

热点阅读