ES6模板字符串

2023-05-22 11:28:03 浏览数 (1)

ES6(ECMAScript 2015)引入了模板字符串,它是一种更强大、更灵活的字符串表示方式。模板字符串允许在字符串中嵌入表达式、变量和换行符,并支持多行字符串的定义。

基本语法:

模板字符串使用反引号(`)包裹,可以在字符串中插入占位符 ${expression} 来表示表达式的值。

代码语言:javascript复制
`string text ${expression} string text`
  • string text 是普通字符串。
  • ${expression} 是要插入的表达式。

示例:

代码语言:javascript复制
// 基本用法
let name = 'John';
let greeting = `Hello, ${name}!`;

console.log(greeting); // 输出 'Hello, John!'

在上面的示例中,我们使用模板字符串创建了一个包含变量的字符串。${name}将会被变量name的值替换。

多行字符串:

模板字符串支持多行字符串的定义,无需使用换行符或字符串连接符。

示例:

代码语言:javascript复制
// 多行字符串
let message = `
  This is a
  multi-line
  string.
`;

console.log(message);
// 输出:
//   This is a
//   multi-line
//   string.

在上面的示例中,我们使用模板字符串定义了一个多行字符串。无需手动添加换行符或字符串连接符,即可创建多行文本。

嵌套表达式:

模板字符串允许在占位符中嵌套更复杂的表达式,包括函数调用、三元运算符等。

示例:

代码语言:javascript复制
// 嵌套表达式
let a = 5;
let b = 10;
let sum = `The sum of ${a} and ${b} is ${a   b}.`;

console.log(sum); // 输出 'The sum of 5 and 10 is 15.'

在上面的示例中,我们在模板字符串中嵌套了一个表达式${a b},计算了变量ab的和。

标签模板:

模板字符串还支持标签模板的使用,通过在模板字符串前面加上一个标签函数来自定义字符串的处理方式。

基本语法:

代码语言:javascript复制
tagName`string text`
  • tagName 是一个标签函数。

示例:

代码语言:javascript复制
// 标签模板
function highlight(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i  ) {
    result  = strings[i];
    if (i < values.length) {
      result  = `<strong>${values[i]}</strong>`;
    }
  }
  return result;
}

let name = 'John';
let age = 30;

let message = highlight`Hello, my name is ${name} and I am ${age} years old.`;

console.log(message);
// 输出:
//   Hello, my name is <strong>John</strong> and I am <strong>30</strong> years old.

在上面的示例中,我们定义了一个标签函数highlight,它将模板字符串中的值用 <strong> 标签包裹起来。通过在模板字符串前面使用highlight函数,我们可以对字符串进行自定义处理。

原始字符串:

标签模板的一个特殊用途是创建原始字符串(raw string),通过访问raw属性可以获取未进行转义处理的原始字符串。

示例:

代码语言:javascript复制
// 原始字符串
function raw(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i  ) {
    result  = strings.raw[i];
    if (i < values.length) {
      result  = values[i];
    }
  }
  return result;
}

let path = '\temp\folder';

let message = raw`The path is: ${path}`;

console.log(message); // 输出 'The path is: \temp\folder'

在上面的示例中,我们使用raw函数创建了一个原始字符串,其中包含了转义字符。通过访问strings.raw属性,我们可以获取未进行转义处理的原始字符串。

0 人点赞