ES之模板字符串

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

嵌入变量

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

const name = 'wuXiaoBai';
let str = `HI, ${name}`;
console.log(str); // wuXiaoBai

嵌入表达式

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

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

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

模板字符串嵌套

let arr = [{ value: 1 }, { value: 2 }];
let message = `
	<ul>
		${arr.map((item) => {
      return `<li>${item.value}</li> `;
    })}
	</ul>
`;
// '<ul><li>1</li> ,<li>2</li></ul>'

标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串, 这被称为“标签模板”功能（tagged template）

var x = 'wu',
  y = 'baicai';
var res = log`HI! ${x}, I am ${y}`;
// 注意在这个例子中 literals 的最后一个元素是空字符串, 因为它是以变量结尾的
function log(literals, value1, value2) {
  console.log(literals); // ['HI! ', ', I am ', '', raw: Array(3)]
  console.log(value1); // wu
  console.log(value2); // baicai
}

// 这里呢一个元素就是空字符串
var res2 = log`${x}, I am ${y}！`;
// ['', ', I am ', '！', raw: Array(3)]
// wu
// baicai

字符串新增方法

includes()

返回布尔值，表示是否找到了参数字符串。

let s = 'Hello world!';

s.startsWith('Hello'); // true

startsWith()

返回布尔值，表示参数字符串是否在原字符串的头部。

s.endsWith('!'); // true

endsWith()

返回布尔值，表示参数字符串是否在原字符串的尾部。

s.includes('o'); // true

上面的三个个方法都支持第二个参数，表示开始搜索的位置。

s.startsWith('world', 1); // true
s.endsWith('Hello', 5); // true  从头开始到倒数 n 个字符
s.includes('Hello', 6); // false

repeat()

返回一个新字符串，表示将原字符串重复n次。

'xa'.repeat(3); // "xaxaxa"
'na'.repeat(0); // ""
// 小数取整
'na'.repeat(2.9); // "nana"
'na'.repeat(2.1); // "nana"
// 负数报错
'na'.repeat(-1); // Invalid count value at String.repeat

padStart() padEnd()

padStart()用于头部补全，padEnd()用于尾部补全, 接受两个参数，

1. 第一个参数是字符串补全生效的最大长度
2. 第二个参数是用来补全的字符串

'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'

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

'abc'.padStart(5, '0123456789'); // '01abc'

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

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

trimStart() trimEnd()

trimStart()和trimEnd()这两个方法。它们的行为与 trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。

它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';

s.trim(); // "abc"
s.trimStart(); // "abc  "
s.trimEnd(); // "  abc"

at()

接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

const str = 'hello';
str.at(1); // "e"
str.at(-1); // "o"