奋斗30天Javascript之ECMAScript 6 入门之字符串的扩展（part24）

轉自阮一峰老師《ECMAScript 6 入门》

字符串的扩展目錄

1. includes(), startsWith(), endsWith() 
2. repeat() 
3. padStart()，padEnd() 
4. 模板字符串

1：JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中，而現在ES6提供了3種新方法。

ES6 又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

注意点：

• 这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 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

includes()

定义和用法

1. includes() 方法用于判断字符串是否包含指定的子字符串。
2. 如果找到匹配的字符串则返回 true，否则返回 false。

注意： includes() 方法区分大小写。

语法

string.includes(searchvalue, start)

参数值

参数	描述
searchvalue	必需，要查找的字符串。
start	可选，设置从那个位置开始查找，默认为 0。

返回值

类型	描述
Number	如果找到匹配的字符串返回 true，否则返回 false。

栗子一：

查找字符串是否包含 "world":

<p id="demo"></p>

<p><strong>注意:</strong> IE 11 及更早版本不支持 includes() 方法 。</p>

<script>
  var str = "Hello world, welcome to the world.";
  var n = str.includes("world");
  document.getElementById("demo").innerHTML = n;
</script>

結果為：true

栗子二：

从第 12 个索引位置开始查找字符串

<p id="demo"></p>

<p><strong>注意:</strong> IE 11 及更早版本不支持 includes() 方法 。</p>

<script>
  var str = "Hello world, welcome to the ES6.";
  var n = str.includes("world", 12);
  document.getElementById("demo").innerHTML = n;
</script>

結果為：false

startsWith()

定义和用法

1. startsWith() 方法用于检测字符串是否以指定的子字符串开始。
2. 如果是以指定的子字符串开头返回 true，否则 false。
3. startsWith() 方法对大小写敏感。

语法

string.startsWith(searchvalue, start)

参数值

参数	描述
searchvalue	必需，要查找的字符串。
start	可选，查找的开始位置，默认为 0。

返回值

类型	描述
Boolean	如果字符串是以指定的子字符串开头返回 true，否则 false。

栗子一：

<p id="demo"></p>

  var str = "Hello world, welcome to the Runoob.";
  var n = str.startsWith("Hello");
  document.getElementById("demo").innerHTML = n;

結果為：true

栗子二：

查看从第 6 个索引位置是否以 "world" 开头:

<p id="demo"></p>
<script>
  var str = "Hello world, welcome to the Runoob.";
  var n = str.startsWith("world", 6);
  document.getElementById("demo").innerHTML = n;
</script>

endsWith()

与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

2：字符串重复

repeat()

定義和用法：

返回新的字符串，表示将字符串重复指定次数返回。

栗子：

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

如果参数是小数，向下取整： 

console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello,"

如果repeat的参数是负数或者Infinity，会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

3：padStart()，padEnd() 

定義和用法：

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

1. padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。
2. padEnd：返回新的字符串，表示用参数字符串从头部补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

4：模板字符串

定義和用法：

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

 传统的 JavaScript 语言，输出模板通常是这样写的（jq寫的）

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

ES6：

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

// 普通字符串
let string = `Hello'\n'world`;
console.log(string); 
// "Hello'
// 'world"

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

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

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

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

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错

由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`
// "Hello World"

模板字符串甚至还能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

如果需要引用模板字符串本身，在需要时执行，可以写成函数。

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

上面代码中，模板字符串写成了一个函数的返回值。执行这个函数，就相当于执行这个模板字符串了。