es6之字符串的扩展

177 阅读2分钟

     1.模板字符串

          (1)基础用法: 

         let message = `我的模板字符串`

          如果你的字符串中要使用`个符号,用\来转义。例子:

         let message = `mess/`age`

          注:在模板字符串中,空格、缩进、换行都会被保留

          如果想要去掉字符串首部的空格,换行,用trim()函数去掉。例子:

        let message = `    messge`.trim()

         (2)嵌入变量

           只需要将变量名写在 ${} 之中,例子:

        let a = 1,b = 2;
        let massage = `meaa${1}age${2}`        // meaa1age2
        let x = `${a*2}${b-a}`                 // 21
        let arr = [{value:1},{value:2}]
        let message = `
		${arr.map((item) => {
			return `
				${item.value}
			`
		})}`
        // `${arr}`=arr.toString()     // 此例子可以展示模板字符串支持嵌套
        // (大括号中的值不是字符串,将按照一般的规则转为字符串)

           注:大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属

                  性,调用函数。

(3)标签模板

           定义:紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串,是函数调用的             一种特殊形式。

           例子:

            let x = 'Hi', y = 'Kevin';
            var res = message`${x}, I am ${y}`; 
            function message(literals, value1, value2) {
	      console.log(literals); // [ "", ", I am ", "" ]
	      console.log(value1); // Hi
	      console.log(value2); // Kevin
             }

            function message(literals, ...values) { 
               // 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
	       let result = '';
	       for (let i = 0; i < values.length; i++) {
		   result += literals[i] + values[i];
	      }
              result = literals[0] ;            
	       return result;
           }
实际应用:

  1.过滤 HTML 字符串,防止用户输入恶意内容

    例子:

      let sender = '<script>alert("abc")</script>'; // 恶意代码
      let message =  SaferHTML`<p>${sender} has sent you a message.</p>`;

     function SaferHTML(templateData){
         let s = templateData[0];
         for (let i = 1; i < s.length; i++) {
            let arg = String(s[i]);
            s += arg.replace(/&/g, "&amp;")     // 转义恶意代码                  .replace(/</g, "&lt;")                 .replace(/>/g, "&gt;");
            s += templateData[i];

         }
         return s;      
       }
  message = <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>
    2.多语言转换(国际化处理) 没用过

   2.字符串的新增方法

       (1)includes(),startsWith(),endsWith()

               用法:

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

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

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

              例子:

                 let s = 'Hello world!'
                 s.startsWith('world', 6) // true
                 s.endsWith('Hello', 5) // true   针对前n个字符
                 s.includes('Hello', 6) // false

      (2)repeat(n)

              用法:返回一个新字符串,表示将原字符串重复n次。(n为小数取整,NaN等同于                  0,字符串转化为数字,负数报错,-1-0直接等同于0)

     (3)padStart(补全后的最大长度,用来补全的参数),padEnd()

              用法:字符串补全长度的功能

              例子:

            'x'.padStart(5, 'ab') // 'ababx'   5是补全后的最大长度 如没有第二个参数,用空格来补
            'x'.padEnd(5, 'ab')   // 'xabab'       如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。

            用于的场景:

               1.为数值补全指定位数。

               2.提示字符串格式:'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

     (4)trimStart(),trimEnd()

              用法:消除字符串头或者尾的空格( tab 键、换行符等不可见的空白符号也有效)。                返回的都是新字符串,不会修改原始字符串

     (5)matchAll()

              用法:返回一个正则表达式在当前字符串的所有匹配