在前端开发中，有时需要通过 JavaScript 读取文本文件的内容，比如读取配置文件或者外部数据等。本文将介绍如何使用 JavaScript 读取文本文件，并提供示例代码和指导意义。
读取文件的几种方法
XMLHttpRequest
XMLHttpRequest 是一种可以发送 HTTP 请求和接收服务器响应的对象。它最初是为 Ajax（Asynchronous JavaScript and XML）而设计的，但现在已经广泛用于从服务器获取文本、JSON 等数据类型。以下是使用 XMLHttpRequest 读取文本文件的示例代码：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- ---------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
----- ------- - -----------------
---------------------
-
--
-----------xhr.open('GET', 'example.txt')：使用 GET 方法请求 example.txt 文件。xhr.onreadystatechange：监听状态变化事件，当状态码为 4（请求已完成）且状态为 200（请求成功）时，表示文件读取成功。xhr.responseText：获取文件的内容。
fetch
fetch 是一种基于 Promise 的网络请求 API，可用于向服务器发送请求并接收响应。fetch 更加简单、灵活且易于使用，以下是使用 fetch 读取文本文件的示例代码：
fetch('example.txt')
.then(response => response.text())
.then(content => console.log(content));fetch('example.txt')：使用 GET 方法请求 example.txt 文件。.then(response => response.text())：将响应体解析为文本。.then(content => console.log(content))：获取文件的内容并打印到控制台。
FileReader
FileReader 可以读取本地文件内容，并且支持读取多种文件类型，包括文本、图片、视频等。以下是使用 FileReader 读取文本文件的示例代码：
-- -------------------- ---- -------
----- ----- - --------------------------------
---------- - -------
------------ - -------------
-------------------------------- ---------- -
----- ---- - ---------------
----- ------ - --- -------------
------------- - ----------- -
----- ------- - ----------------
---------------------
--
------------------------
---
---------------------------------input.type = 'file'：创建一个文件选择框。input.accept = 'text/plain'：限制文件类型只能选择纯文本文件。input.addEventListener('change', function() {...})：监听文件选择框的 change 事件。reader.onload：在读取完成后触发 onload 事件，获取文件内容。reader.readAsText(file)：读取文件并返回字符串形式的文本内容。
总结
通过以上三种方法，我们可以使用 JavaScript 读取文本文件的内容。其中 XMLHttpRequest 和 fetch 更加适合从服务器读取文件，而 FileReader 则适用于从客户端读取文件。同时，不同的方法有着各自的优缺点，在实际开发中需要根据具体情况选择合适的方法。
希望本文能够帮助读者了解如何使用 JavaScript 读取文本文件，并提供一些简单易用的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13197