优雅而高效的JavaScript——模板字面量

2023-12-13 14:35:39

在这里插入图片描述

🤨博主:小猫娃来啦
🤨文章核心:优雅而高效的JavaScript——模板字面量

什么是模板字面量

  • 模板字面量的定义

模板字面量是一种更强大、更灵活的字符串表示方式,使用反引号()包裹。与传统的字符串表示方式相比,模板字量允许在字符串中插入变量、表达式和原始字符串,并且支持多行文本的处理。

  • 模板字面量的特点
  • 使用反引号(`)包裹字符串,使得字符串更清晰易读。
  • 使用${}语法可以在字符串中插入变量和表达式。
  • 支持多行文本的处理,不再需要手动添加换行符。

使用模板字面量插入变量

  • 使用${}语法插入变量

使用${}语法可以在模板字面量中插入变量,例如

const name = 'Alice';
const message = `Hello, ${name}!`;
console.log(message); // Hello, Alice!
  • 嵌套插入变量

模板字面量允许在${}语法中嵌套插入变量,例如:

const = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`;
const message = `Hello, ${fullName}!`;
console.log(message); // Hello, John Doe!
  • 插入表达式

除了插入变量,模板字面量还可以插入任意的JavaScript表达式,例如:

const num1 = 5;
const num2 = 10;
const sum =The sum of ${num1} and ${num2} is ${num1 + num}.`;
console.log(sum); // The sum of 5 and 10 is 15
  • 插入原始字符串

在模板字面量中插入原始字符串时,可以使用${}语法的原始字符串形式,例如:

const rawString = String.raw`HelloWorld`;
console.log(rawString); // Hello\nWorld

处理多文本

  • 使用模板字面量的多行文本

模板字面量可以直接处理多行文本,不再需要手动添加换行符,例如:

const message = `This a 
multi-line 
text.`;
console.log(message);
// This is a
//-line
// text.
  • 多行文本的缩进和格式化

模板字面量支持多行文本的缩进和格式化,可以使用${}语法嵌套实现,例如:

const indentExample = `
  This is an example
  of ind text.`;
console.log(indentExample);
//   This is an example
//   of indented text.
  • 多行文本转义字符

在模板字面量中使用多行文本时可以使用转义字符来处理特殊字符,例如:

constExample = `This is a\`
multi-line\`
text.`;
console.log(escapeExample);
// This is a
// multi-line
// text.

模板字面量的高级应用

标签模板字量

标签模板字面量是一种使用自定义函数处理板字面量的方式,可以在${}语法前添加一个函数名作为前缀,例如:

function greeting(strings, ...values) {
  return `${strings[0]}${values[0].toUpperCase()}strings[1]}`;
}
const name = 'alice';
const message = greeting`Hello ${name}!`;
console.log(message); // Hello, ALICE!

自定义模板字面量函数

可以自定义模板字面量函数来处理特定的逻辑,例如:

function multiplier(strings, ...values) {
  const num = Number(values[]);
  return strings[0] + (num * 2) + strings[1];
}
const value = 5;
const result = multiplier`The result is: ${value}.`;
console.log(result); // The result is: 10.

常见应用场景

拼接字符串

模板字面量可用于更简洁拼接字符串,特别是含有变量和表达式的情况,例如:

const name = 'Garfield';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // My name Garfield and I am 30 years old.

HTML模板

const data = { name: 'Alice', age: 30 };
const html = `
  <div>
    <h1>${data.name}</h1>
    <p>Age: ${data.age}</p>
  </div>
`;
console.log(html);
// <div>
//   <h1>Alice</h1>
//   <p>Age: 30</p>
// </div>

SQL查询

在构建SQL查询时,模板字面量可用于拼接SQL语句和插入变量,例如:

const firstName = '菲猫';
const lastName = '加';
const query = `
  SELECT *
  FROM users
  WHERE first_name = '${firstName}'
  AND last_name = '${lastName}'
`;
console.log(query);
// SELECT *
// FROM users
// WHERE first_name = '菲猫'
// AND last_name = '加'

在这或许有很多没有接触过sql语句的程序员
那么我稍微解释一下:

SELECT * FROM users WHERE first_name = ‘菲猫’ AND last_name = ‘加’ 这是个SQL查询语句
SELECT 表示查询*表示所有,FORM表示来自,users 是数据表的名字,WHERE 是条件语句 first_name = 'Alice' AND last_name = 'Smith' 是查询条件
翻译为:在用户表中查询first_name(名)是菲猫,并且 last_name(姓氏)是的用户的所有信息

文件路径拼接

模板字面量还可以方便地拼接文件路径,特别是需要插入变量的情况,例如:

const dir = 'path/to';
 file = 'index.html';
const filePath = `${dir}/${file}`;
console.log(filePath); // path/to/index.html

与统字符串拼接的比较

  • 效率比较

与传统字符串拼接相比,模板字面量通常在运行时更高效。由于模板字面量的编译阶段已经将变量和表达式嵌入到字符串中,不需要运行时的拼接操作,因此更快速。

  • 可读性比较

模板字面量可以更清晰地展示字符串中的变量和表达式,使得代码更易读和维护。传统字符串拼接可能会导致代码难以阅读和理解,尤其是在包含多个变量和表达式的情况下。

  • 安全性比较

使用模板字面量可以更有效地避免注入攻击。由于模板字面量对变量和表达式的处理是在编译阶段完成的,可以确保在运行时不会执行不安全的代码。

关于模板字符串就介绍到这里啦

在这里插入图片描述


文章来源:https://blog.csdn.net/dyk11111/article/details/133820799
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。