ES6语法——字符串的扩展

一、ES6 加强了对 Unicode 的支持,正确识别两个字节组成的字符
        在ES5中我们知道JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示,但是ES5却无法正确的识别这个有两个字节组成的字符。ES6中,JavaScript增加了对超出\u0000~\uFFFFUnicode范围的字符支持。
        ES6的解决方法:将这种超过两个字节的组成的单个字符的码点放在一对花括号里面就可以正确的识别

二、codePointAt(index)方法
        JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为2个字节。对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符), JavaScript 会认为它们是两个字符。这里解释了为什么"𠮷"这个字符调用length属性的时候,返回的长度是2了
       在ES5为我们提供的charCodeAt(index)方法只能分别返回"𠮷"前两个字节和后两个字节的值,而charAt(index)方法无法正常读取这个字符(出现了乱码)。ES6 提供了codePointAt(index)方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。

        值得注意的是:
        (1)codePointAt(index)方法识别大于两个Unicode节点编码的字符的时候,识别前两个字节的时候会直接将这个四个字节的字符的码值返回,识别后面的字节的码值和charCodeAt(index)返回的结果一致
        (2)codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符,它的返回结果与charCodeAt方法相同(这就导致了下面所说的那种情况)。
        (3)通过for......of  循环解决codePointAt(index)在传入正确的位置索引的时候,返回的结果有偏差的问题-----原理就是for .......of 循环可以正确的识别 32 位的 UTF-16 字符

 三、String.fromCodePoint(numX,numX,...,numX)方法(numX为Unicode值)
        ES5 提供String.fromCharCode(numX,numX,...,numX)方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF)
        ES6 提供了String.fromCodePoint(numX,numX,...,numX)方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
        值得注意的是:
        (1)String.fromCodePoint(numX,numX,...,numX),当传入多个Unicode值的时候,将会把结果合并成一个字符串返回
        (2)String.fromCodePoint(numX,numX,...,numX)是定义在String对象上的方法。而codePointAt(index)是定义在字符串实例上的方法,这一点要去区分


四、字符串的遍历器接口

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

        除了遍历字符串,这个遍历器大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

五、at(index)
        ES5 对字符串对象提供charAt方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
        目前JavaScript有一个提案,提出字符串实例的at()方法,可以识别 Unicode 编号大于0xFFFF的字符,返回正确的字符。(at()方法可以通过babel-polyfill垫片库实现)

六、includes( string), startsWith(string ),endsWith(string ) 
        传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中(如果存在就返回这个字符串的位置,不存在的时候返回 -1 )。
        6.1.ES6 又提供了三种新方法:
    (一)includes(string):返回布尔值,表示是否找到了参数字符串。
    (二)startsWith(string):返回布尔值,表示参数字符串是否在原字符串的头部。
    (三)endsWith(string):返回布尔值,表示参数字符串是否在原字符串的尾部
        6.2 关于第二个参数
        (1)这三个方法都支持第二个参数,表示开始搜索的位置。
        (2)endsWith的行为与其他两个方法includes()  startsWith()有所不同。它针对前n个字符(开区间,不包括边界值),而其他两个方法针对从第n个(闭区间,包括边界值)位置直到字符串结束。
        (3)注意这三个方法都是s结尾

写文章的时候用美团点了一个外卖,并无其他含义

七、repeat(number)
        repeat方法返回一个新字符串,表示将原字符串重复n次。
        repeat方法参数可能有下列情况:
        (一)参数为1,就是返回的新字符串的内容就只是重复源字符串1次
        (二)参数如果是小数,会被取整数部分。
        (三)参数如果是小于或等于-1的负数或者无穷大Infinity的数时,会报错
        (四)参数是(-1-0)区间的小数,repeat()方法会自动转换成-0  等同于repeat(0)
        (五)参数是数字型字符串的话,repeat方法会自动进行隐式转换成数字的
        (六)参数是NaN的话,等同于repeat(0)

八、padStart(minNumber,string),padEnd(minNumber,string)
        这两个API具有字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart( )用于头部补全,padEnd( )用于尾部补全。
        padStart(minNumber,string)方法和padEnd(minNumber,string)方法一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。可能出现以下情况:
        (1)如果原字符串的长度,等于或大于指定的最小长度minNumber,则这两个方法都返回原字符串。
        (2)如果用来补全的字符串与原字符串,两者的长度之和超过了指定的小长度(minNumber),则会截去超出位数的补全字符串。
        (3)如果省略第二个参数,默认使用空格补全长度。

        padStart(minNumber,string),padEnd(minNumber,string)的主要用途之一就是为数值补全指定位数,一般像将月份的补全为03月这样子

九、模板字符串
        模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

        我们在使用模板字符串的过程中需要注意以下方面:
        (一)如果在模板字符串中需要使用反引号,则前面要用反斜杠转义
        (二)如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中
        (三)模板字符串中如果要引入变量的话,要用 ${变量名} 这样的形式引入才可以
        (四)大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性
        (五)如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
        (六)模板字符串中的${.......} 大括号内部可以放入任意的 JavaScript 表达式,可以进行运算、可以引用对象属性、可以调用函数、可以甚至还能嵌套,甚至还能调用自己本身。

十、标签模板
       (一) 模板字符串可以紧跟在一个函数名后面(只能跟在后面),该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
        (二)标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
        (三)如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。下面的tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分。tag函数的其他参数,都是模板字符串各个变量被替换后的值。

         “标签模板”的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。以及切换多种语言
十一、String.raw()方法
        ES6为原生String对象新增raw()属性。String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。

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

推荐阅读更多精彩内容