字符串的扩展

<!--字符串的扩展-->
        <script type="text/javascript">
            /*1.字符串的unicode表示法*/
            function unicode(){
                //JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点
                console.log("\u0061");//a
                
                //但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
                console.log("\uD842\uDFB7");//"??"
                
                console.log("\u20BB7");//?7;
                /*超过了\u0000~\uFFFF之间的字符。JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。*/
                
                //ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。
                console.log("\u{20BB7}");//"??",
                
                console.log("\u{41}\u{42}\u{43}");//ABC;
                
                let hello = 123;
                console.log("\u{6F}");//"o".
                console.log(hell\u{6F});//123
                console.log(hell\u{6F}==hello);//true
                console.log(‘\u{1F680}‘===‘\uD83D\uDE80‘)//true
                
                //上面代码中，最后一个例子表明，大括号表示法与四字节的 UTF-16 编码是等价的。
            
                //有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。
                console.log(‘\z‘ === ‘z‘,‘\172‘ === ‘z‘,‘\x7A‘ === ‘z‘,‘\u007A‘ === ‘z‘,‘\u{7A}‘ === ‘z‘)//true
                
            };
            unicode();
            
            /*2.codePointAt()*/
            /*JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符。*/
            function codePointAt(){
                var s = "??";
                let xm = "吉";
                console.log(s.length);//2字节
                console.log(s.charAt(0))//""。
                console.log(s.charAt(1))//""。
                console.log(s.charCodeAt(0))//55362
                console.log(s.charCodeAt(1))//57271
                console.log(xm.length);//1字节。
                console.log(xm.charCodeAt(0));//21513
                
                //ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

                let st = ‘??a‘;
                
                console.log(st.codePointAt(0)) // 134071
                console.log(st.codePointAt(1)) // 57271
                
                console.log(st.codePointAt(2)) // 97
                
                //codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。
//                console.log(st.codePointAt(0).toString(16)) // "20bb7"
//                console.log(st.codePointAt(2).toString(16)) // "61"
                //你可能注意到了，codePointAt方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt方法传入 2。解决这个问题的一个办法是使用for...of循环，因为它会正确识别 32 位的 UTF-16 字符。
                for (let ch of st) {
                  console.log(ch.codePointAt(0).toString(16));
                };
                
                //codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

                function is32Bit(c) {
                  return c.codePointAt(0) > 0xFFFF;
                };
                is32Bit("??") // true
                is32Bit("a") // false
            };
            codePointAt();
            
            /*3.String.fromCodePoint()*/
            /*es5提供string。fromCharCode方法，用于从码点返回对应字节。但是这个方法不能识别32位UTF-16字符（unicode编号大于0xffff）*/
            function fromCodePoint(){
                console.log(String.fromCharCode(0x20BB7))//?
                //es5,不能识别大于0xffff的码点，所以最高位2被舍弃，最后返回码点u+0BB7对应的字符，而不是码点u+20bb7对应的字符。
                console.log(String.fromCodePoint(0x20BB7))//??
                //ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。
                
                console.log(String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘)//true
                //上面代码中，如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。
                
                //注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。
            };
            fromCodePoint();
            
            /*4.字符串的遍历器接口*/
            /*es6为字符串添加了遍历接口，使得字符串可以被for..of循环遍历*/
            function strFor(){
                for(let codePoint of "foot"){
                    console.log(codePoint);//f,o,o,t
                };
                /*除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。*/
                var text = String.fromCodePoint(0x20BB7);
                //传统for循环，识别不了大于0xFFFF的码点。
                for (let i=0; i<text.length;i++){
                    console.log(text[i]);
                };
                //es6循环
                for(let txt of text){
                    console.log(txt);//??
                }
            };
            strFor();
            
            /*5.at()*/
            /*ES5 对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符*/
            function att(){
                var txt = "abc";
                var ji="??";
                console.log(txt.charAt(0));//a
                console.log(ji.charAt(0));//""
                /*es6需要通过垫片库实现*/
                //console.log(ji.at(0))
            };
            att();
            
            /*6.normalize() 糯摸来s*/
            
            /*7.includes(),startsWith(),endsWith()*/
            /*includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。*/
            function search(){
                let s = "hello world!";
                console.log(s.includes("o"));//true
                console.log(s.startsWith("h"));//true
                console.log(s.endsWith("!"));//true
                //以上三个方法都支持第二个参数，表示开始搜索的位置
                console.log(s.includes("world!",6));
                console.log(s.startsWith("l",2));
                console.log(s.endsWith("hello",5 ))
            };
            search();
            
            /*8.repeat()*/
            /*repeat方法返回一个新字符串，表示将原字符串重复n次。*/
            function repeat(){
                var txt = "广东爱情故事";
                console.log(txt.repeat(3))//3遍。
                console.log(txt.repeat(0))//空，
                /*小数点取整，不进行四舍五入*/
                console.log(txt.repeat(2.9))
                //如果repeat的参数是负数或者Infinity，会报错。
                //console.log(txt.repeat(Infinity));
                //console.log(txt.repeat(-1));
                
                /*但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。*/
                console.log(txt.repeat(-0.9));//空
                //参数NaN等于0；
                console.log(txt.repeat(NaN));
                /*如果repeat的参数是字符串，则会先转换成数字。*/
                console.log(txt.repeat("3"));
            };
            repeat();
            
            /*9.padStart,padEnd()*/
            /*ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。*/
            function pad(){
                var txt = "x";
                console.log(txt.padStart(5,"ab"));//ababx
                console.log(txt.padEnd(5,"ab"));//xabab
                /*上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。*/
                
                /*如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。*/
                var text = "xxx";
                console.log(text.padStart(2,"ab"));
                console.log(text.padEnd(2,"ab"));
                
                /*如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。*/
                console.log(text.padStart(10,"0123456789"));
                
                //如果省略第二个参数，默认使用空格补全长度。
                console.log(text.padStart(5));
                
                //padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
                console.log(text.padStart(10, ‘0‘));// "0000000xxx"
                console.log(text.padStart(10, ‘0‘));// "0000000xxx"
                console.log(text.padStart(10, ‘0‘));// "0000000xxx"
                
                //另一个用途是提示字符串格式
                var day = "09-12";
                console.log(text.padStart(10,"YYYY-MM-DD"));
                console.log(day.padStart(10,"YYYY-MM-DD"));
            };
            pad();
            
            /*11.模板字符串*/
        function templateStr(){
                var num = 12;
                var text = `<b>你们好${num}</b>`;
                document.write(text);
                //多行字符串。
                $(".bgg").html(`
                    <ul>
                        <li>123</li>
                        <li>456</li>
                    </ul>
                `.trim());
                
                //大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
                let x = 1;
                let y = 2;
                
                document.write(`${x} + ${y} = ${x + y}`);
                // "1 + 2 = 3"
                
                document.write(`${x} + ${y * 2} = ${x + y * 2}`)
                // "1 + 4 = 5"
                
                let obj = {x: 1, y: 2};
                document.write(`${obj.x + obj.y}`);
                // "3"
                
                //模板字符串之中还能调用函数。
                function fn() {
                  return "Hello World";
                };
                document.write(`foo ${fn()} bar`);
                /*如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。*/
                
                //如果模板字符串中的变量没有声明，将报错。
                // 变量place没有声明
//                let msg = `Hello, ${place}`;
                // 报错
                
                /*由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出*/
                document.write(`Hello ${‘World‘}`);
                
                //模板字符串甚至还能嵌套。
                const tmpl = addrs =>document.write(`
                  <table>
                  ${addrs.map(addr => `
                    <tr>
                        <td>${addr.first}</td>
                    </tr>
                    <tr>
                        <td>${addr.last}</td>
                    </tr>
                  `).join(‘‘)}
                  </table>
                `);
                //上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。

                const data = [
                    { first: ‘<Jane>‘, last: ‘Bond‘ },
                    { first: ‘Lars‘, last: ‘<Croft>‘ },
                ];
                // <table>
                //
                //   <tr><td><Jane></td></tr>
                //   <tr><td>Bond</td></tr>
                //
                //   <tr><td>Lars</td></tr>
                //   <tr><td><Croft></td></tr>
                //
                // </table>
                
                //如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
                let str = ‘return ‘ + ‘`Hello ${name}!`‘;
                let func = new Function(‘name‘, str);
                func(‘Jack‘); // "Hello Jack!"
                // 写法二
                let strt = ‘(name) => `Hello ${name}!`‘;
                let funct = eval.call(null, strt);
                funct(‘Jack‘) // "Hello Jack!
                
            };
            templateStr();