在浏览器环境 中，JavaScript 无法直接访问本地文件系统，但可通过 <input type="file"> 结合 FileReader API 读取用户上传的文件。在JavaScript中读取文件的方式主要取决于运行环境。如果是在Node.js环境中，可以使用Node.js的文件系统模块来读取文件;如果是在浏览器环境中，则需要使用File API来读取文件。
一、JavaScript 读取文件的方法
JavaScript 可以通过以下方式读取文件内容，具体取决于运行环境：
1. 浏览器环境
使用 <input type="file"> 或 FileReader API 读取用户上传的文件：
html<input type="file" id="fileInput" /><ｓｃｒｉｐｔ>document.getElementById('fileInput').addEventListener('change', function(e) {const file = e.target.files[0];const reader = new FileReader();reader.onload = function(e) {console.log(e.target.result); // 文件内容};reader.readAsText(file); // 读取为文本});</ｓｃｒｉｐｔ>
2. Node.js 环境
使用 fs 模块同步或异步读取文件：
javascriptconst fs = require('fs');// 异步读取fs.readFile('example.txt', 'utf8', (err, data) => {if (err) throw err;console.log(data);});// 同步读取const content = fs.readFileSync('example.txt', 'utf8');console.log(content);
二、JavaScript 引用其他 JS 文件的函数
在 HTML 中通过 <ｓｃｒｉｐｔ> 标签引入外部 JS 文件，并调用其函数：
1. 直接引入并调用
html<!-- 引入外部 JS 文件 --><ｓｃｒｉｐｔ src="utils.js"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>// 调用 utils.js 中定义的函数sayHello(); // 假设 utils.js 中有 function sayHello() { console.log("Hello"); }</ｓｃｒｉｐｔ>
2. 模块化导入
如果使用现代浏览器或打包工具(如 Webpack、Vite)，可通过 import/export 语法：
javascript// utils.jsexport function sayHello() {console.log("Hello");}// main.jsimport { sayHello } from './utils.js';sayHello();
在 HTML 中需指定 type="module"：
html<ｓｃｒｉｐｔ type="module" src="main.js"></ｓｃｒｉｐｔ>
3. 动态加载(动态 import())
按需加载 JS 文件并调用函数：
javascript// 动态导入import('./utils.js').then(module => {module.sayHello();});
三、关键注意事项
浏览器环境：直接读取文件需用户主动选择，无法直接访问本地文件系统。
Node.js 环境：需确保文件路径正确。
模块化：使用 export/import 时需通过 HTTP 服务器运行，直接打开 HTML 文件可能报错。
作用域：非模块化代码中，函数需挂载到全局对象才能跨文件调用。
以上就是JavaScript读取文件的方法介绍，JavaScript是一种运行在浏览器中的脚本语言,其安全性限制了直接从本地读取文件的能力。然而,可以通过使用HTML5的File API来实现读取本地文件。
