美文网首页
es6 字符串扩展

es6 字符串扩展

作者: Xu涵 | 来源:发表于2019-04-03 23:51 被阅读0次

ES6加强了对Unicode的支持,并扩展了字符串的 对象

1. 字符的Unicode表示法

js允许用\uxxxx来表示一个字符,但只限于码点在\u0000~\uFFFF之间,超出这个范围的字符可用两个双字节表示。

如果\u后面加超过0xFFFF的数值,js会理解成一个码点和一个字符,比如\u20BB7会理解成\u20BB+7,打印出“7”

但是如果加了大括号,如\u{20BB7}就能正确解读字符

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

2. codePointAt()

js内部,字符以 UTF-16 的格式储存,每个字符固定为2个字节。

背景:汉字“𠮷”的码点是0x20BB7,UTF-16 编码为0xD842 0xDFB7,需要4个字节储存。对于这种4个字节的字符,JavaScript 不能正确处理,字符串长度会误判为2,而且charAt方法无法读取整个字符,charCodeAt方法只能分别返回前两个字节和后两个字节的值。

结果:ES6提供了codePointAt方法,能正确处理四个字节存储的字符,返回一个字符的码点(十进制)

  • codePointAt方法:这个方法的参数是字符在字符串中的位置,如果一个汉字占了两个字符,那么0代表汉字的前两个字节,1代表汉字的后两个字节

    如果想要将这个函数返回的十进制数转换成十六进制,可以使用toString方法

    let s = '𠮷a';
    
    s.codePointAt(0).toString(16) // "20bb7"
    s.codePointAt(2).toString(16) // "61"
    
  • 注意:codePointAt方法传入的序号有时候是不正确的(比如上面代码中a的序号应该是1),为了解决这个问题,可以使用for...of循环

    let s = '𠮷a';
    for (let ch of s) {
      console.log(ch.codePointAt(0).toString(16));
    }
    // 20bb7
    // 61
    

3. String.fromCodePoint()

ES5 提供String.fromCharCode方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF)。

String.fromCharCode(0x20BB7)
// "ஷ"

ES6提供了String.fromCodePoint方法,可以识别大于0xFFFF的字符

  • 注意:String.fromCodePoint 方法定义在String对象上,但codePointAt方法定义在字符串的实例对象上。

4. 字符串的遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历。

  • 优点:for...of可以识别大于0xFFFF的码点,但for循环不行

5. normalize()

Unicode提供了两种方法用来表示语调符号和重音符号。一种是直接提供重音符号的字符,另一种是提供合成符号

JavaScript将合成字符当成两个字符,所以虽然用两种方法可以表示同一个字符,但实际上JavaScript是识别不了的

ES6提供normalize()方法来解决上述问题

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

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

  • NFC,默认参数,表示“标准等价合成”,返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。

  • NFD,表示“标准等价分解”,即在标准等价的前提下,返回合成字符分解的多个简单字符。

  • NFKC,表示“兼容等价合成”,返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。

  • NFKD,表示“兼容等价分解”,即在兼容等价的前提下,返回合成字符分解的多个简单字符。

6. includes(),startsWith(),endsWith()

除了indexOf方法可以用来确定一个字符串是否包含在另一个字符串中,还有另外三种方法:

  • includes():返回布尔值,表示是否找到了参数字符串。

  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。

  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

这三个方法都支持第二个参数,表示开始搜索的位置。但是endwith针对的是前n个字符。

7. repeat()

这个方法返回一个新字符串,表示将原字符串重复n次。参数可能情况如下:

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

  • 如果参数是负数,会报错

  • 如果参数是零到负一之间的小数,等同于零

  • 如果是NaN也等同于零

  • 如果参数是字符串,会先转换成数字

'x'.repeat(3) // "xxx"
'na'.repeat(2.9) // "nana"
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""

8. padStart(),padEnd()

这两个方法用于补全字符串,padStart()用于头部补全,padEnd()用于尾部补全。

这两个方法一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。

如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。

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

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

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

如果第二个参数省略,默认用空格补全长度

9. 模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串(所有空格和缩进都会保留哎输出中),或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

如果在多行文本中消除换行,可以使用trim消除

在${}中可以使用字符串、变量和表达式,也可以调用函数

模板字符串能嵌套,可以在模板字符串的变量之中,嵌入了另一个模板字符串,如下:

const tmpl = addrs => `
  
  ${addrs.map(addr => `
    
  `).join('')}
  ${addr.first}
    ${addr.last}
`;

const data = [
    { first: '', last: 'Bond' },
    { first: 'Lars', last: '' },
];

console.log(tmpl(data));
// 
//
//   
//   
//
//   
//   
//
// BondLars

10. 标签模板

标签模板:模板字符串也可以紧跟在一个函数名后面,这个函数将被调用来处理这个模板字符串

alert`123`
// 等同于
alert(123)

如果模板字符里面有变量,会将模板字符串先处理成多个参数再调用函数。下面这个函数的第一个参数是一个数组,其他参数都是模板字符串被替换后的值

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

标签模板可以用来过滤掉HTML字符串,防止用户恶意输入

11. String.raw()

这个方法用来充当模板字符串的处理函数,返回一个斜杠都被转义的字符串,对应于替换变量后的模板字符串。

这个方法也可以作为正常函数使用,它的第一个参数是一个具有raw属性的对象,且raw属性的值应该是一个数组。

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

12. 模板字符串的限制

模板字符串默认会将字符串转义,导致无法嵌入其他语言,如下:

function latex(strings) {
  // ...
}

let document = latex`
\newcommand{\fun}{\textbf{Fun!}}  // 正常工作
\newcommand{\unicode}{\textbf{Unicode!}} // 报错
\newcommand{\xerxes}{\textbf{King!}} // 报错

Breve over the h goes \u{h}ere // 报错
`

ES2018放松了对标签模板里面的字符串转义限制,遇到不合法字符就返回undefined,并且从raw属性上面可以得到元字符串

但是,这种对字符串转义的放松,只在标签模板解析字符串时生效,不是标签模板的场合,依然会报错。

相关文章

  • es6的数值,函数,字符串扩展

    一、es6的数值扩展 二、es6的函数扩展 代码效果:对象解构在函数中的应用 三、es6字符串扩展 常用方法 代码...

  • ECMAScript6新方法(2)

    字符串扩展 ES6加强了对Unicode的支持,并且扩展了字符串对象。 获取字符unicode编码 通过unico...

  • ES6扩展归纳

    ES6扩展归纳 介绍ES6相比与ES5在原有对象上的扩展,包括字符串、正则、数值、函数、数组、对象等扩展,本文是阮...

  • 11.ES6字符串startsWith、endsWith和字符串

    在ES6中字符串扩展了startsWith、endsWith和字符串模板1、startsWith 开始是否包含2、...

  • ES6字符串扩展

    ES6字符串扩展 ES6加强了对 Unicode 的支持(特殊字符) 之前JavaScript允许采用\uxxxx...

  • ES6、ES7语法以及Vue模板语法

    ES6、ES7语法 字符串的扩展 includes(str) : 判断是否包含指定的字符串startsWith(s...

  • ES6入门之内置对象的扩展

    1.字符串的扩展 模板字符串。ES5写法: ES6写法: 新增字符串方法:1 repeat; //复制字符串2 i...

  • Typescript 特性

    Typescript是根据es6来扩展的js 的超集。 字符串的特性有: 多行字符串: 字符串模版 可以使用$+大...

  • 小巧玲珑-ES6之字符串的扩展

    ES6扩展了字符串对象。 一、操作字符串的一些方法 1、字符串的包含 传统上,JavaScript 只有index...

  • 第四章 字符串的扩展

    ES6增强了对Uniconde的支持并且扩展了字符串对象。 4..1字符串Unicode表示法 lavaScrip...

网友评论

      本文标题:es6 字符串扩展

      本文链接:https://www.haomeiwen.com/subject/whkxiqtx.html