JS模板字符串|极客笔记

JS模板字符串

在JavaScript中，模板字符串是一种允许跨越多行的字符串，它可以包含变量，并支持在字符串中嵌入表达式的特殊类型字符串。模板字符串通常用来创建具有动态内容的字符串，并且在现代JavaScript开发中得到广泛应用。

基本语法

模板字符串使用反引号（“）来表示，其中可以包含变量或表达式，使用${}来包裹需要替换的内容。例如：

const name = 'World';
const greeting = `Hello, ${name}!`;
console.log(greeting);

在上面的示例中，我们定义了一个字符串模板，其中使用${}语法来替换变量name的值。最终输出是Hello, World!。

多行字符串

传统的字符串在JavaScript中需要使用换行符\n来表示换行，而模板字符串可以直接包含换行，从而实现多行字符串的目的。例如：

const multiLineString = `
Line 1
Line 2
Line 3
`;
console.log(multiLineString);

上面的示例中，我们定义了一个多行字符串，输出为：

Line 1
Line 2
Line 3

嵌套模板字符串

模板字符串可以进行嵌套，这样可以实现更加复杂的字符串组合。例如：

const name = 'World';
const greeting = `Hello,  ${`dear$ {name}`}!`;
console.log(greeting);

在上面的示例中，我们在模板字符串中嵌套了另一个模板字符串，最终输出是Hello, dear World!。

原始字符串

使用模板字符串时，还可以使用String.raw方法来获取原始字符串。原始字符串中，反斜杠不会被转义。例如：

const rawString = String.raw`This is a raw string\n`;
console.log(rawString);

在上面的示例中，String.raw方法会返回原始字符串内容，不会转义\n，输出为This is a raw string\n。

标签模板字符串

除了普通的模板字符串，JavaScript还提供了标签模板字符串的功能。标签模板字符串是在模板字符串前加上一个函数调用，该函数被称为标签函数。标签函数可以对模板字符串进行自定义的解析和处理。例如：

function customTag(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += values[i];
    }
  });
  return result;
}

const name = 'World';
const greeting = customTag`Hello, ${name}!`;
console.log(greeting);

在上面的示例中，customTag函数接受模板字符串中的原始字符串和值，在这里我们只是简单地连接字符串和值，并输出为Hello, World!。

实际应用

模板字符串在实际开发中有许多应用场景，例如：

HTML模板拼接：在前端开发中，可以使用模板字符串来拼接HTML模板。

const user = {
  name: 'John Doe',
  email: 'john@example.com'
};

const htmlTemplate = `
  <div class="user">
    <h2> ${user.name}</h2> Email:$ {user.email}
  </div>
`;

动态生成SQL语句：在后端开发中，可以使用模板字符串动态生成SQL语句。

function generateSQLQuery(criteria) {
  let query = 'SELECT * FROM table WHERE 1=1';

  if (criteria.name) {
    query += ` AND name = ' ${criteria.name}'`; } if (criteria.age) { query += ` AND age =$ {criteria.age}`;
  }

  return query;
}

const criteria = {
  name: 'John Doe',
  age: 30
};

const sqlQuery = generateSQLQuery(criteria);

国际化字符串：在多语言网站开发中，可以使用模板字符串来实现国际化字符串的替换。

const translations = {
  en: {
    greeting: 'Hello,  ${name}!' }, de: { greeting: 'Hallo,$ {name}!'
  }
};

const language = 'en';
const name = 'World';
const greeting = translations[language].greeting.replace('${name}', name);
console.log(greeting);