如何将文本文件的内容加载到 JavaScript 变量中？

在前端开发过程中，有时需要从文本文件中读取数据并将其加载到 JavaScript 变量中。本文针对这个需求，介绍几种实现方式。

方法一：XMLHttpRequest

XMLHttpRequest 可以用于向服务器请求数据。我们可以利用它来读取本地文件的内容。

1. 创建 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

2. 打开文件并发送请求：

xhr.open('GET', './file.txt', false);
xhr.send();

3. 获取文件内容：

if (xhr.status === 200) {
  var text = xhr.responseText;
}

完整代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', './file.txt', false);
xhr.send();
if (xhr.status === 200) {
  var text = xhr.responseText;
}

需要注意的是，上述代码只适用于读取同域下的文本文件，如果要读取其他域下的文件，需要设置 CORS。

方法二：fetch

fetch 是浏览器原生提供的用于请求资源的 API。与 XMLHttpRequest 相比，fetch 更加简洁易用，也能够读取文本文件的内容。

1. 发送请求：

fetch('./file.txt')

2. 将响应转为字符串：

fetch('./file.txt')
  .then(response => response.text())
  .then(text => console.log(text));

完整代码如下：

fetch('./file.txt')
  .then(response => response.text())
  .then(text => console.log(text));

需要注意的是，fetch 方法只能读取同域下的文本文件，如果要读取其他域下的文件，也需要设置 CORS。

方法三：Node.js 的 fs 模块

如果你的代码运行在 Node.js 环境中，还可以使用 fs 模块来读取文本文件。

1. 引入 fs 模块：

const fs = require('fs');

2. 读取文件：

const text = fs.readFileSync('./file.txt', 'utf8');

完整代码如下：

const fs = require('fs');
const text = fs.readFileSync('./file.txt', 'utf8');
console.log(text);

注意，在 Node.js 环境中使用 fs 模块需要注意安全性问题，避免恶意代码读取和修改文件。另外，fs 模块也只能读取本地文件，无法读取网络文件。