JS多行字符串|极客笔记

JS多行字符串

在JavaScript中，我们经常需要处理多行文本，比如HTML模板、CSS样式等。在ES6之前，处理多行字符串通常需要使用字符串拼接的方式，这样会使代码变得臃肿且不易阅读。但是在ES6中，引入了模板字符串（template strings），可以很方便地处理多行字符串。

使用模板字符串

ES6中的模板字符串用反引号（“）括起来，可以包含换行符和变量。下面是一个简单的示例：

const name = 'Alice';
const greeting = `
    Hello, ${name}!
    How are you today?
`;

console.log(greeting);

在这个示例中，我们使用模板字符串将问候语赋给变量greeting，并在其中插入了变量name。打印greeting会输出以下内容：

    Hello, Alice!
    How are you today?

标签模板

除了普通的模板字符串外，ES6还提供了标签模板（tagged template），可以让我们自定义字符串的处理方式。标签模板是一个函数，会在模板字符串的变量被插入之前对其进行处理。下面是一个简单的示例：

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

const name = 'Bob';
const age = 30;
const message = myTag`Name:  ${name}, Age:$ {age}`;

console.log(message);

在这个示例中，myTag函数将模板字符串中的字符串部分和变量部分分别放入strings和values数组中，然后根据自己的逻辑对它们进行处理。打印message会输出以下内容：

Name: Bob, Age: 30

多行字符串的应用

在实际开发中，多行字符串通常用于以下场景：

1. HTML模板

在前端开发中，我们经常需要动态生成HTML代码。使用模板字符串可以很方便地创建多行HTML模板，比如：

function createCard(title, content) {
    return `
        <div class="card">
            <h2> ${title}</h2>$ {content}
        </div>
    `;
}

const card = createCard('Title', 'Content');

console.log(card);

2. CSS样式

在编写CSS样式时，有时我们需要生成大段的样式代码。使用模板字符串可以方便地创建多行的CSS样式，比如：

function createStyle(color, size) {
    return `
        .text {
            color:  ${color}; font-size:$ {size}px;
        }
    `;
}

const style = createStyle('blue', 16);

console.log(style);

3. SQL查询

在后端开发中，我们经常需要与数据库交互。使用模板字符串可以很方便地构建多行的SQL查询语句，比如：

function createQuery(table, columns) {
    return `
        SELECT  ${columns.join(', ')} FROM$ {table}
        WHERE condition;
    `;
}

const query = createQuery('users', ['id', 'name', 'age']);

console.log(query);