字符串的扩展

1. 模版字符串

• 传统的 JavaScript 语言，输出模板通常要拼接字符串

  // 原始方法做模版
  let data = {
      message: {
          title: "今天天气真的很好",
          todo: "打台球",
          time: "时间2020.3.25"
      }
  }
  let oOuter = document.getElementById("outer");
  let str = '<div class="box"><h2> ' + data.message.title + '</h2><p>' + data.message.todo + '</p><p>' + data.message.time + '</p></div> ';
  oOuter.innerHTML = str; Copy to clipboardErrorCopied

• 模板字符串（template string）是增强版的字符串，用反引号（`）标识。可以嵌套变量，可以换行，可以包含单引号和双引号。

• 它可以当作普通字符串使用，也可以用来定义多行字符串。模板字符串中嵌入变量，需要将变量名写在${}之中。

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

  let data = {
      message: {
          title: "今天天气真的很好",
          todo: "打台球",
          time: "时间2020.3.25",
          isLike: false
      }
  }
  let oOuter = document.getElementById("outer");
  let str = `
      <div class="box">
      <h2>${data.message.title}</h2>
      <p>${data.message.todo}</p>
      <p>${data.message.time}</p>
      <p>${data.message.isLike ? "我喜欢你" : "我不喜欢你"}</p >
      </div>
  `;
  // oOuter.appendChild(str);//Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
  oOuter.innerHTML = str;//需要用innerHTML设置到元素中Copy to clipboardErrorCopied

• 模板字符串之中还能调用函数。

  function fn(){
      return "hello";
  }
  let str = `${fn()} world`;
  console.log(str);//hello worldCopy to clipboardErrorCopied

2. 字符串新增的方法

• 去空格

  • trim():删除字符串两端的空白符
  • trimStart() 去除首部的空格
  • trimEnd() 去除尾部的空格

  //字符串是基本类型值，一般的方法只能返回新值，而不能改变字符串
  let message = "      hello    world      ";
  log(message);
  
  log(message.trim());
  log(message.trimStart());
  log(message.trimEnd());Copy to clipboardErrorCopied

• 判断

  • startsWith();判断开头有没有包含某个字符串
  • endsWith();判断结尾有没有包含某个字符串
  • includes判断字符串是否包含某个字符串

  //字符串是基本类型值，一般的方法只能返回新值，而不能改变字符串
  let message = "hello    world";
  log(message);
  
  log(message.startsWith("hello"));//true
  log(message.endsWith("world"));////true
  log(message.endsWith("ld"));//true
  log(message.includes("ld"));//true
  log(message.includes("or"));//true
  log(message.includes("你好啊"));//falseCopy to clipboardErrorCopied

• repeat重复当前的字符串，可以规定次数

  let message = "海峰，你好s啊";
  log(message.repeat(10));Copy to clipboardErrorCopied

• 补充字符

  • padStart()当字符串不够某个长度的时候，在前边补充任意字符
  • padEnd(),//当字符串不够某个长度的时候，在后边补充任意字符

  let message = "这个是密码";
  log(message.padStart(8, '#'))
  log(message.padEnd(8, '#'))
  log(message.padStart(8, '#*2222'))