ECMAScript6--5.字符串扩展

1.字符串新增特性

  • Unicode表示法

  • 遍历接口

  • 模板字符串

  • 新增方法(10种)

    eg:
    1.Unicode表示法

    {
     console.log('a','\u0061');//a a
     
     //码值大于(0xFFFF)两个字节的最大编码的时候会怎么样呢?
     console.log('s','\u20BB7');
    //输出:s []7(当成了两个字符,第一个不是unicode编码所以没有对应的字符没有正常显示出来)
    
     //在ES6中怎么处理unicode编码大于0xFFFF这么一个编码呢?
      --用{}把unicode编码包起来就可以了;
     console.log('s-1','\u{20BB7}'); //s-1  吉   
    }
    

    2.codePointAt--取字符的码值

     {
     //'吉'的unicode编码\u{20BB7}大于0xFFFF,当成了两个字符;
     /*它的码值是大于两个字节的,这个时候就把它处理成4个字节了,计算长度的时候
     每两个字节是一个长度,所以这个地方长度是2;*/
     let s='吉'; 
     let a = 'a';
     
     //ES5:
     console.log('length',s.length, a.length); //length 2  1
    
     //ES5:取编码的时候的方法:charAt();--对unicode处理是不到位的;
     //charCodeAt只取两个字节;
     consle.log('0',s.charAt(0)); //取第一个位置的字符 结果:乱码
     consle.log('1',s.charAt(1)); //取第二个位置的字符 结果:乱码
     console.log('at0',s.charCodeAt(0)); //取第一个字符unicode编码的码值  at0 55362
     console.log('at1',s.charCodeAt(1)); //取第二个字符unicode编码的码值  at1 57271
    
    
     //ES6:取字符的码值codePointAt()
      let s1='吉a'; 
      console.log('length',s1.length); // length  3
      
      //取第一个字符的码值:code0 134071(十进制的)
      //(第一个字符是用4个字节存储的,取第一个字符位置的时候codePointAt会计算四个字节的码值)
      console.log('code0',s1.codePointAt(0));
      
      //看码值对应的是什么字符(转换成16进制)code0 20bb7
      console.log('code0',s1.codePointAt(0).toString(16));
      
      //code1  57271(取1的时候就是只取那个字符的后两个字节)
      console.log('code1',s1.codePointAt(1));
      
      //就会明白了取1的时候取了两个字节,而不是从第4个字节之后去取
      console.log('code2',s1.codePointAt(2)); // code2 97  (a)
      
     }
    

3.formCharCode--根据码值给出对应的字符

    {
        //ES5和ES6最大的区别就是能不能处理unicode字符
        (大于0xFFFF--大于两个字节的unicode字符);
        
        //ES5:
        console.log(String.formCharCode("0x20bb7")); //乱码
   
        //ES6:
        console.log(String.fromCodePoint("0x20bb7")); //吉
   
    }

4.字符串遍历器接口:let of 遍历器

通过字符串的遍历器接口可以正常处理字符串中包含unicode编码大于0xFFFF的情况;

    {
        let str ='\u{20bb7}abc';
        
        //ES5:遍历
        for(let i=0;i<str.length;i++){
            console.log('ES5',str[i]); //乱码 乱码 a b c
        }
        
        //ES6:
        for(let code of str){
            console.log('ES6:',code); //吉 a b c
        }
    }

5.includes && startsWith && endsWith

1.includes:判断字符串中是否包含某些字符
2.startsWith &&endswith:判断一个字符串是不是以某些字符为起始或截止

   {
    //判断字符串中是否包含某些字符
    //判断字符串中是不是包含r字符
    let str ="string";
    console.log('includes:',str.includes("r")); // includes true
    
    //一个字符串是不是以某些字符为起始或截止
    //判断是不是以str开始的
    console.log('start',str.startsWith('str')); //start true
    
    //判断是不是以ng截止的
    console.log('end',str.endsWith('ng')); //end  true
    }
    
    {
        //重复--字符串的复制功能
        let str = 'abc';
        
        //ES6:repeat(数字)  数字:指定重复的次数
        console.log(str.repeat(2)); //abcabc
    }

6.模板字符串--把数据和模板最后拼成一个带结果的字符串

    {
        let name ="list";
        let info = "Hello world!"
        
        let m =`i am ${name},${info}`;//(`键盘数字1左边的按键)
        console.log(m); //i am list,hello world!
    }

7.padStart && padEnd

ES6没有实现,ES7的一个草案,加了babel--polyfill这个库的话也是可以在ES6中使用的;
padStart:补白的作用--向前补;
padEnd: 补白的作用--向后补;

    {
        //padStart 补白的作用--向前补;(例如:日期小于10的01-09可以用这个)
            API返回的最终结果就是要求第一个参数是长度
           (api返回的字符串必须满足第一个参数指定的长度),如果长度不够第二个参数要补什么
        console.log('1'.padStart(2,'0')); //01
        
        //padEnd 向后补白;
        console.log('1'.padEnd(2,'0')); //10
        
    }

8.标签模板

作用:
1.在过滤html字符串的时候(在防止xss攻击的时候用这个处理)
2.处理多语言转换的时候;

{
 let user ={
      name:'list',
      info:'hello world'
  };
        
 console.log(abc`i am ${user.name},${user.info}`);//输出:i am ,,,listhello world
 function abc(s,v1,v2){
      //["i am",",","",raw:Array[3]] "list" "hello world"
      console.log(s,v1,v2); 
      return s+v1+v2;
   }
    
 }

9.raw

raw对所有的斜杠进行了转义,斜杠之前加了斜杠,斜杠是不生效的;

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

推荐阅读更多精彩内容

  • 字符的 Unicode 表示法 codePointAt() String.fromCodePoint() 字符串的...
    卞卞村长L阅读 747评论 0 0
  • ES6加强了对Unicode的支持,并且扩展了字符串对象。 字符的Unicode表示法: JavaScript允许...
    呼呼哥阅读 781评论 0 0
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,598评论 18 399
  • 园中翠竹根连根, 雨后春笋众儿孙。 一旦长成云连翠, 簇簇相拥抱成林。 并抗风雨迎晓日, 同敌雪霜近黄昏。 雨露春...
    清风明月冯耀杰阅读 269评论 1 8
  • 我住的这个宇宙 遵循着二十四小时的法则 万物皆有定数 自生自养 开出了结果 下一个宇宙 长成什么模样
    地球最后的夜晚阅读 247评论 0 4