es6 字符串扩展

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属性上面可以得到元字符串

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容