在瀏覽器環(huán)境 中，JavaScript 無法直接訪問本地文件系統(tǒng)，但可通過 <input type="file"> 結(jié)合 FileReader API 讀取用戶上傳的文件。在JavaScript中讀取文件的方式主要取決于運(yùn)行環(huán)境。如果是在Node.js環(huán)境中，可以使用Node.js的文件系統(tǒng)模塊來讀取文件;如果是在瀏覽器環(huán)境中，則需要使用File API來讀取文件。
一、JavaScript 讀取文件的方法
JavaScript 可以通過以下方式讀取文件內(nèi)容，具體取決于運(yùn)行環(huán)境：
1. 瀏覽器環(huán)境
使用 <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); // 文件內(nèi)容};reader.readAsText(file); // 讀取為文本});</ｓｃｒｉｐｔ>
2. Node.js 環(huán)境
使用 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 文件的函數(shù)
在 HTML 中通過 <ｓｃｒｉｐｔ> 標(biāo)簽引入外部 JS 文件，并調(diào)用其函數(shù)：
1. 直接引入并調(diào)用
html<!-- 引入外部 JS 文件 --><ｓｃｒｉｐｔ src="utils.js"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>// 調(diào)用 utils.js 中定義的函數(shù)sayHello(); // 假設(shè) utils.js 中有 function sayHello() { console.log("Hello"); }</ｓｃｒｉｐｔ>
2. 模塊化導(dǎo)入
如果使用現(xiàn)代瀏覽器或打包工具(如 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. 動(dòng)態(tài)加載(動(dòng)態(tài) import())
按需加載 JS 文件并調(diào)用函數(shù)：
javascript// 動(dòng)態(tài)導(dǎo)入import('./utils.js').then(module => {module.sayHello();});
三、關(guān)鍵注意事項(xiàng)
瀏覽器環(huán)境：直接讀取文件需用戶主動(dòng)選擇，無法直接訪問本地文件系統(tǒng)。
Node.js 環(huán)境：需確保文件路徑正確。
模塊化：使用 export/import 時(shí)需通過 HTTP 服務(wù)器運(yùn)行，直接打開 HTML 文件可能報(bào)錯(cuò)。
作用域：非模塊化代碼中，函數(shù)需掛載到全局對(duì)象才能跨文件調(diào)用。
以上就是JavaScript讀取文件的方法介紹，JavaScript是一種運(yùn)行在瀏覽器中的腳本語言,其安全性限制了直接從本地讀取文件的能力。然而,可以通過使用HTML5的File API來實(shí)現(xiàn)讀取本地文件。
