javascript的创建多行字符串的7种方法-php开发

当我们使用JavaScript时，创建多行字符串（即包含多个换行符）是常见的操作之一。针对这个需求，本文总结了7种在JavaScript中创建多行字符串的方法，分别是：

当我们使用JavaScript时，创建多行字符串（即包含多个换行符）是常见的操作之一。针对这个需求，本文总结了7种在JavaScript中创建多行字符串的方法，分别是：

使用换行符\n：


javascript
  const str = '第一行\n第二行\n第三行';
  console.log(str);
  输出结果：
  第一行
  第二行
  第三行


使用反引号(~)：


javascript
  const str = `第一行
  第二行
  第三行`;
  console.log(str);
  输出结果：
  第一行
  第二行
  第三行


使用加号+连接多个字符串：

javascript
  const str = '第一行' + '\n' +
              '第二行' + '\n' +
              '第三行';
  console.log(str);
  输出结果：
  第一行
  第二行
  第三行

利用JavaScript自动连接相邻字符串：

javascript
  const str = '第一行'
              '第二行'
              '第三行';
  console.log(str);
  输出结果：
  第一行第二行第三行

使用Array.prototype.join方法：

javascript
  const strArr = ['第一行', '第二行', '第三行'];
  const str = strArr.join('\n');
  console.log(str);
  输出结果：
  第一行
  第二行
  第三行

使用模板字符串 ${}`：

javascript
  const str = `
  第一行
  第二行
  第三行
  `;
  console.log(str);
  输出结果：
  ```
第一行
  第二行
  第三行
  ```

使用String.raw方法：

javascript
  const str = String.raw`第一行
  第二行
  第三行`;
  console.log(str);
  输出结果：
  第一行
  第二行
  第三行
注意：以上代码均使用ES6语法，需要支持ES6的运行环境才能运行。
示例1：应用于字符串模板
const name = 'Tom';
const age = 18;
const address = 'China';

const str = `
  姓名：${name}
  年龄：${age}
  地址：${address}
`;
console.log(str);

输出结果：
姓名：Tom
年龄：18
地址：China

示例2：应用于函数返回值
function getMultiLineStr() {
  return `
  第一行
  第二行
  第三行
  `;
}

console.log(getMultiLineStr());

输出结果：

第一行
第二行
第三行  

以上就是JavaScript创建多行字符串的7种方法。您可以根据场景灵活应用，提高开发效率。

基础教程推荐