4. 字符串的拓展

目录

• 一. 字符串的遍历接口
• 二.模板字符串
• 三.标签模板
• 四. 字符串的新增方法
• 总结

一. 字符串的遍历接口

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

  var Str = "hello-world!";
  var arr = []
  for(let tem of Str){
      arr.push(tem)
  }
  console.log(arr);
  //返回 ["h", "e", "l", "l", "0", "-", "w", "o", "r", "l", "d", "!"]
  

二.模板字符串

1. 在传统的JavaScript中，输出模板通常这样写（写法比较繁琐）

   $("#someID").append(
   	'There are <b>' + basket.count + '</b>' + 
       'item in your basket,' + 
       '<em>' + basket.onSale + 
       '</em> are on Sale!'
   )
   

2. ES6引入了模板字符串来解决这个问题

   • 模板字符串是增强版的字符串，使用 ` 来标识

   • 它可以当做普通字符串来使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

   • 如果使用模板字符串来标识多行字符串，空格和缩进和换行也会保留在输出中

   • 可以通过在字符串最后面添加 trim（）方法消除字符串之前和之后的空格和换行

     let name = 'frisbee';
     let age = 18;
     console.log(`my name is ${name},
     my age is ${age}`)
     //返回如下
     my name is frisbee,
     			my age is 18
     

3. 在模板字符串中嵌入变量

   • 模板字符串中嵌入变量，需要写在 ${} 中

   • 大括号内可以放入任意的JavaScript表达式， 可以进行运算，以及对象属性的引用，以及函数的调用

     let name = '小七'；
     console.log(`my name is ${name}`);		// my name is 小七
     
     console.log(`3 + 5 = ${3 + 5}`)			// 3 + 5 = 8
     
     //函数的调用
     function fn(){
         return 'hello 小琪';
     }
     console.log(`you can speak ${fn()}`)	// you can speak hello 小琪
     

4. 模板字符串写成函数的返回值

   • 执行这个函数，就相当于执行这个字符串了

     let func = (name) => `hello ${name}`;
     func("小七");		//hello 小七
     

三.标签模板

定义：将模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个字符串。这被称为标签模板功能

• 标签函数会根据模板字符串接收多个参数

• 第一个参数始终为字符串数组，该数组由模板字符串中所有的字符串组成，由模板中插入的变量进行分割

• 其它的参数由插入的变量组成，每一个变量值都为标签函数的一个参数

  //定义一个方法，该方法用来返回传入的实际参数
  function func(){
      for(let i=0;i<arguments.length;i++){
          console.log(arguments[i]);
      }
  }
  //使用三个不同形式的模板字符串来启动标签模板功能
  func`hello world!`
  // 	["hello world!"]
  
  func` hello ${name} world! `
  //	[" hello ", " world! "]
  //	frisbee
  
  func`hello ${name} world! ${age}`	
  //	["hello ", " world! ", ""]
  //	frisbee
  //	18
  

• 可以将参数按照原来的顺序拼接回去

  //literals存储的是第一个字符串数组，values存储的是所有插入的变量数组
  function parseStr(literals,...values){
      let output = '';
      let index;
      for(index=0;index<values.length;index++){
          output += literals[index] + values[index] 
      }
      output += literals[index];
      console.log(output);
      return output;
  }
  
  parseStr`hello ${name} world ${age} gogogo`
  // hello frisbee world 18 gogogo
  
  

四. 字符串的新增方法

• 判断字符串是否包含某个子字符串

  • includes（）：返回布尔值，表示找到了参数字符串

  • startsWith（）：返回布尔值，表示参数字符串是否在原字符串头部

  • endsWith（）：返回布尔值，表示参数字符串是否在原字符串末尾

    let str = "hello-world";
    str.includes('hello');		//true
    str.startsWith('hel');		//true
    str.endsWith('world');		//true
    

• 补全字符串长度

  • padStart（）：头部补全，包含两个参数，第一个为补全的最大位数，第二个为用来补全的字符串

  • padEnd（）：尾部补全，参数同上

    var str = '888';
    str.padStart(5,'12');		//12888
    str.padEnd(5,'00');			//88800
    

• 消除头部或者尾部的空格

  • trimStart（）：消除字符串头部的空格，换行，table，返回新的字符串，不会修改原字符串

  • trimEnd（）：消除字符串尾部的空格，换行，table，返回新的字符串，不会修改原字符串

    var str = `
    		hello kitty
    	`;
    str.trimStart();
    // hello kitty 换行
    str.trimEnd();
    //换行 + table + hello Kitty
    

• 重复字符串

  • repeat（）：重复字符串，该方法包含一个参数，指定重复字符串的次数

    var str = 'hello';
    str.repeat(3);		//hellohellohello
    

• 匹配字符串

  • matchAll（）：该方法返回一个正则表达式在当前字符串的所有匹配
  • 示例见后续正则表达式

• ...

总结

1. ES6为字符串增加了遍历的接口 for...of,可以遍历字符串中的每一个字符

2. ES6新增了模板字符串，模板字符串以 ` 开头和结尾，模板字符串创建多行文本的字符串比较方便

   • 模板字符串中可通过 ${变量名} 的方式在字符串中插入变量
   • 模板字符串输出的时候，会原样输出字符串中的空格和换行

3. ES6定义了标签模板，即方法名和模板字符串的组合

   • 标签模板可用于处理模板字符串
   • 标签函数会将模板字符串拆分为两部分，
     • 第一部分是字符串模板中所有字符串组成的字符串数组（遇到插入的变量即分割），作为标签函数的第一个参数。
     • 第二部分是所有插入变量组成的参数，作为标签函数的后续参数

4. ES6为字符串新增了一些处理方法

   • 补全方法：padStart（），padEnd（）
   • 子字符串判断方法：includes（），startsWith（），endsWith（）
   • 正则表达式匹配方法：matchAll（）
   • 重复字符串方法：repeat（）
   • 去空格方法：trimStart（），trimEnd（）
   • Unicode字符串的处理方法等