js字符串模板里面怎么加变量

在JavaScript中，使用模板字符串（Template Literals）可以方便地在字符串中嵌入变量。模板字符串是由反引号（“）包围的，并且可以在其中使用${}语法来嵌入变量。相比于传统的字符串拼接方式，模板字符串更简洁、可读性更高、易于维护。

一、模板字符串简介

模板字符串是ES6（ECMAScript 2015）引入的一种新的字符串表示方式。它不仅支持多行字符串，还允许在字符串中嵌入变量和表达式。模板字符串使用反引号（“）来包围整个字符串，并且在字符串中可以用${}来嵌入变量。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

在上面的例子中，变量name的值被嵌入到模板字符串中，生成了最终的字符串Hello, Alice!。

二、嵌入变量和表达式

1. 嵌入简单变量

在模板字符串中嵌入变量非常简单，只需将变量名放在${}中即可。

let age = 30;
let message = `I am ${age} years old.`;
console.log(message); // 输出: I am 30 years old.

2. 嵌入表达式

不仅可以嵌入变量，还可以在${}中直接写表达式，表达式的结果会被嵌入到字符串中。

let a = 10;
let b = 20;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 输出: The sum of 10 and 20 is 30.

三、多行字符串

模板字符串还支持多行字符串，这在编写长文本或HTML时非常有用。

let text = `This is a 
multiline string.`;
console.log(text);
// 输出:
// This is a
// multiline string.

四、嵌入函数调用

模板字符串还可以嵌入函数调用，函数的返回值会被嵌入到字符串中。

function greet(name) {
    return `Hello, ${name}`;
}
let message = `${greet("Bob")}, welcome to the party!`;
console.log(message); // 输出: Hello, Bob, welcome to the party!

五、模板字符串的应用场景

1. 动态生成HTML

模板字符串可以用来动态生成HTML，这在前端开发中非常常见。

let user = {
    name: "John",
    age: 25
};
let html = `
<div>
    <h1>${user.name}</h1>
    <p>Age: ${user.age}</p>
</div>
`;
console.log(html);
// 输出:
// <div>
//     <h1>John</h1>
//     <p>Age: 25</p>
// </div>

2. 动态生成SQL查询

模板字符串也可以用来动态生成SQL查询。

let table = "users";
let column = "name";
let value = "Alice";
let query = `SELECT * FROM ${table} WHERE ${column} = '${value}'`;
console.log(query); // 输出: SELECT * FROM users WHERE name = 'Alice'

六、注意事项和最佳实践

1. 适度使用模板字符串

虽然模板字符串非常强大，但在某些情况下过度使用可能会导致代码难以阅读和维护。应根据具体情况选择合适的字符串表示方式。

2. 避免XSS攻击

在生成HTML时，特别是嵌入用户输入时，一定要注意防范XSS（跨站脚本攻击）。可以使用适当的转义函数来处理用户输入。

function escapeHtml(unsafe) {
    return unsafe.replace(/[&<"']/g, function (match) {
        return {
            '&': '&amp;',
            '<': '&lt;',
            '"': '&quot;',
            "'": '&#39;'
        }[match];
    });
}
let userInput = '<script>alert("XSS")</script>';
let safeHtml = `<p>${escapeHtml(userInput)}</p>`;
console.log(safeHtml); // 输出: <p>&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</p>

3. 调试模板字符串

在调试模板字符串时，可以利用控制台输出中间变量，或者使用模板字符串本身的特性将调试信息嵌入到字符串中。

let debug = true;
let debugInfo = `Debug info: a = ${a}, b = ${b}, sum = ${a + b}`;
let result = `The sum of ${a} and ${b} is ${a + b}.${debug ? ' (' + debugInfo + ')' : ''}`;
console.log(result); // 输出: The sum of 10 and 20 is 30. (Debug info: a = 10, b = 20, sum = 30)

七、总结

模板字符串在JavaScript中提供了一种简洁、强大的方式来处理字符串操作。通过使用反引号和${}语法，可以方便地在字符串中嵌入变量和表达式，不仅提高了代码的可读性，还减少了出错的可能性。无论是在生成动态HTML、SQL查询，还是在处理多行字符串时，模板字符串都展现出了巨大的优势。在实际开发中，掌握并合理使用模板字符串将极大地提升开发效率和代码质量。