使用 JavaScript 读取和写入文件

在前端开发中，我们经常需要操作文件。JavaScript 很早就提供了许多 API 来读取和写入文件，这给我们带来了很大的便利性。本篇文章将讲解如何使用 JavaScript 读取和写入文件。

读取文件

使用 JavaScript 读取文件有多种方法，其中最常用的有两种：

XMLHttpRequest

XMLHttpRequest 是一种用于在 JavaScript 和服务器之间传输数据的 API。它最初是为 XML 而设计的，但现在可以处理任意格式的数据。我们可以使用 XMLHttpRequest 对象来加载本地和远程文件。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/file', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

在这段代码中，我们使用 XMLHttpRequest 对象来加载了一个本地或远程文件。当 readyState 的值为 4 且 status 的值为 200 时，我们将文件的内容打印到了控制台中。

fetch

fetch 是一个比 XMLHttpRequest 更新的 API，它更简洁、更易用。与 XMLHttpRequest 类似，fetch 也可以加载本地和远程文件。

fetch('/path/to/file')
    .then(response => response.text())
    .then(data => console.log(data));

在这段代码中，我们使用 fetch API 发起了一个 HTTP 请求，并在响应返回后将文件的内容打印到了控制台中。

写入文件

使用 JavaScript 写入文件需要使用 Node.js 环境。Node.js 提供了 fs 模块，它包含了许多方法，可以让我们轻松地读写文件。

写入文件

使用 fs.writeFile() 方法可以将数据写入文件中。

const fs = require('fs');

fs.writeFile('/path/to/file', 'Hello, world!', err => {
    if (err) throw err;

    console.log('The file has been saved!');
});

在这段代码中，我们使用 fs.writeFile() 方法将字符串 Hello, world! 写入了文件中。

读取文件

使用 fs.readFile() 方法可以将文件中的数据读取出来。

const fs = require('fs');

fs.readFile('/path/to/file', 'utf8', (err, data) => {
    if (err) throw err;

    console.log(data);
});

在这段代码中，我们使用 fs.readFile() 方法将文件的内容读取出来并将其打印到了控制台中。

总结

本篇文章展示了如何使用 JavaScript 读取和写入文件。我们介绍了两种读取文件的方法：XMLHttpRequest 和 fetch，并提供了写入和读取文件的示例。这些方法可以在前端和后端的开发中使用，它们为我们提供了更方便、更高效的方式来读取和写入文件。