[ES6] ES6 新特性之字符串

判断是否包含

ES5：

let str = 'hebeisheng';
// ES5提供判断是否包含的方法
console.log(str.indexOf('e')); // 1
console.log(str.lastIndexOf('e')); // 7

ES6：

• includes() 方法
• startsWith() 方法
• endsWith() 方法

includes() 方法

includes() 方法用于判断一个字符串是否包含在另一个字符串中，返回布尔值。

语法结构：

str.includes(searchString[, postion])

• searchString : 在 str 字符串中搜索的字符串。
• postion ：可选项。从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0。

值得注意的是，includes() 方法是区分大小写的。

let str = 'hebeisheng';
console.log(str.includes('e')); // true
console.log(str.includes('e', 7)); // true
console.log(str.includes('e', 8)); // false
console.log(str.includes('E')); // false

做一个不区分大小写的 includes() 方法

let str = 'hebeisheng';
function myIncludes(str, searchStr, index) {
    str = str.toLowerCase();
    searchStr = searchStr.toLowerCase();
     if (typeof index === 'number') {
        return str.includes(searchStr, index);
    } else {
        return str.includes(searchStr);
    }
}
console.log(myIncludes(str, 'E')); // true

startsWith() 方法

stactsWidth() 方法用于判断当前字符串是否是以另外一个给定的子字符串“开头”的，返回布尔值。

语法结构：

str.stactsWidth(searchString[, postion])

• searchString : 在 str 字符串中搜索的字符串。
• postion ：可选项。从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0。

值得注意的是，stactsWidth() 方法是区分大小写的。

let str = 'hebeisheng';
console.log(str.startsWith('he')); // true
console.log(str.startsWith('bei')); // false
console.log(str.startsWith('bei',2)); // true

重复字符串

repeat() 方法

repeat() 方法用于将原字符串重复 n 次，返回一个 新字符串。

语法结构：

repeat(number)

• numer ：表示将元字符串重复的次数。
• 结果：返回一个新的字符串，不会改变原有的字符串的内容

let str = 'abc';
console.log(str.repeat(3)); // abcabcabc

let result = str.repeat(3)
console.log(str, result); // abc abcabcabc

number 参数具有以下几种情况：

• 如果 number 参数为小数的话，则会向下取整。

  let str = 'abc';
  console.log(str.repeat(2.5)); // abcabc
  

• 如果 number 参数为负数或者无穷大的话，则会报错。

  console.log(str.repeat(-2)); // RangeError: Invalid count value
  console.log(str.repeat(Infinity)); // RangeError: Invalid count value
  

• 如果 number 参数为NaN的话，则为0。

  let str = 'abc';
  console.log(str.repeat(NaN)); // 没有任何输出
  console.log(str.repeat(0)); // 没有任何输出
  

• 如果 number 参数为字符串，则会先转换为数字值。

  let str = 'abc';
  console.log(str.repeat('3')); // abcabcabc
  console.log(str.repeat(true)); // abc
  

模板字符串

模板字符串( Template String )是增强版的字符串，使用反引号(``)来代替馈通字符串中的用双引号和单引号。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

替代原有的普通字符串

// ES5 写法
// 定义一个普通字符串
let str1 = 'this is string';
// ES6 写法
// 定义一个模版字符串 - 充当普通字符串来使用
let str2 = `this is string`;
console.log(str1, str2); // this is string this is string

多行字符串

ES5 写法：

let str3 = 'this is\nstring';
console.log(str3);
/*
this is
string
*/

ES6 写法：

let str5 = `this is
string`;
console.log(str5);
/*
this is
string
*/

区别：

ES6 与 ES5 相比，字符串少了一些转义字符，而且不是很麻烦

字符串与变量

模板字符串用 ${} 就可以嵌入变量或表达式

ES5写法：

let name = '张无忌'
let str6 = 'hello ' + name + '!';
console.log(str6); // hello 张无忌!

ES6写法：

let name = '张无忌'
let str7 = `hello ${name} !`
console.log(str7); // hello 张无忌 !

区别：

ES6 与 ES5 相比，字符串少了字符串的拼接，也省了不少事，容易阅读代码

带标签的模板字符串

模板字符串的功能可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能( Tagged Template)。

let str = 'console';
console.log(`this is ${str}.`); // this is console.
console.log`this is ${str}.`; // [ 'this is ', '.' ] console

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签” 指的就是函数，紧跟在后面的模板字符串就是它的参数。

let str = 'console';
function fn(arg) {
    console.log(arg);
}

fn('this is ' + str + '.'); // this is console.
// 模板字符串
fn(`this is ${str}.`); // this is console.
// 带标签的模版字符串
fn`this is ${str}.`; // [ 'this is ', '.' ]

原始字符串

在标签函数的第一个参数中，存在一个特殊的属性 raw ，可以通过它来访问模板字符串的原始字符串,而不经过特殊字符的替换。

let str = 'function'
function fn (arg) {
    console.log(arg.raw[0]);
}
fn`this is ${str}.`

另外，使用String.raw()方法创建原始字符串和使用默认模板函数和字符串连接创建是一 样的。

console.log(String.raw`this is ${str}.`); // this is function.