[ES6] string 拓展

ES6 方法拓展

是否包含子串

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法

方法	描述	返回数据类型
includes()	判断是否找到参数字符串	返回布尔值
startsWith()	判断参数字符串是否在原字符串的头部	返回布尔值
endsWith()	判断参数字符串是否在原字符串的尾部	返回布尔值

以上方法均有两个参数 (str,idx?)，str 需要搜索的字符串，idx 可选的搜索起始位置索引

以上方法只返回布尔值，如果需要知道子串的位置，还得用 indexOf 和 lastIndexOf

以上方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 则会将正则表达式转换为字符串并搜索它

let string = "apple,banana,orange";
string.includes("banana"); // true
string.startsWith("apple"); // true
string.endsWith("apple"); // false
string.startsWith("banana", 6); // true

字符串重复

方法	描述	返回数据类型
repeat()	返回新的字符串，表示将字符串重复指定次数返回	返回 string

• repeat(number)：返回新的字符串，表示将字符串重复指定次数返回
  • number 如果是小数，则向下取整
  • -1<number<0 ,则 number=0,返回 “”
  • number=NaN ,则 number=0,返回 “”
  • number 是负数 或者 number=Infinity,则 报错 请输入有效数据
  • number 如果是字符串则会返回对应的数字

console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2")); // "Hello,Hello,"

字符串补全

• padStart(length,str?)：返回新字符串，表示从头部（左侧）开始用指定字符串补全原字符串
• padEnd(length,str?)：返回新字符串，表示从尾部（右侧）补全原字符串

str 是用来补全的字符串。如果没有指定 str，默认用空格填充；
length 是指定生成的字符串的最小长度；
如果 length <= 原字符串的长度，则返回原字符串；
如果 length <原字符串长度+补全字符串长度，则截去超出位数的补全字符串；

console.log("h".padStart(5, "o")); // "ooooh"
console.log("h".padEnd(5, "o")); // "hoooo"
console.log("h".padStart(5)); // " h"
console.log("computer".padStart(5, "A")); // "computer"
console.log("computer".padStart(10, "beautiful")); //becomputer

字符串

普通字符串

双引号

const str1="111"

单引号

const str2='111'

模板字符串

模板字符串相当于加强版的普通字符串，使用用反引号 `标记字符串,除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式

插入变量和表达式

${}可以放入动态变量，也可以写入表达式

const tempStr = `<div>${Math.random()}</dv>`;

设置输出格式

模板字符串可以任意设置反引号`符号中的格式，输出内容为反引号中定义格式，以方便阅读，例如：

const tempStr = `
hello,
<div>${Math.random()}</dv>
`;

模板字符串中的换行和空格都是会被保留的

标签模板

标签模板，是函数的调用，可以使用方法名直接拼接模板字符串，则模板字符串自动转化为数组；

alert`Hello world!`;
// 等价于
alert("Hello world!");

如果模板字符串中存在变量或表达式，则多个变量自动作为参数追加到方法上

function template(stringArr, ...values) {
  let result = "";
  for (let i = 0; i < stringArr.length; i++) {
    result += stringArr[i];
    if (values[i]) {
      result += values[i];
    }
  }
  console.log(result);
  return result;
}
let name = "Mike";
let age = 27;
template`Name is ${name},I am ${age + 1} years old.`;
//stringArr=[ 'Name is ', ',I am ', ' years old.' ]
// return "Name is Mike,I am 28 years old."

// 等价于
template(["Name is", ",I am ", " years old."], "Mike", 28);

template`Name is,I am years old.`;
//stringArr=[ 'Name is,I am years old.' ]

模板字符串的长度不同于普通字符串长度

如果模板字符串仅是反引号标记的普通字符串,则作为参数传入后被转化为数组，长度为 1

如果模板字符串中存在变量和表达式，则作为参数传入后转化为被 ${}分割后的数组，长度也即转化后数组的长度，例如上述存在两个${}，所以长度为 3