JavaScript 作為一門腳本語言，在 web 開發中起到了至關重要的作用。它不僅可以實現網頁的交互效果，還可以讀取本地文件，對于一些需要動態加載數據的場景非常有用。

那么，如何使用 JavaScript 讀取本地文件呢？下面就來介紹幾種方法。

一、使用 FileReader 對象讀取本地文件

<code>
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(){
console.log(reader.result);
}
</code>

以上代碼會讀取用戶選擇的本地文件，并將文件內容以文本形式保存在 reader.result 中。可以根據實際情況將其渲染到頁面中。

二、使用 Ajax 對象讀取本地文件

<code>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.txt', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
console.log(xhr.responseText);
} 
}
xhr.send(null); 
</code>

以上代碼會讀取名為 file.txt 的本地文件，并將文件內容以文本形式保存在 xhr.responseText 中。

三、使用 fetch API 讀取本地文件

<code>
fetch('file.txt')
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log(error));
</code>

以上代碼會讀取名為 file.txt 的本地文件，并將文件內容以文本形式保存在 data 中。

需要注意的是，使用以上方法讀取本地文件僅限于在 web 服務器環境下運行。如果直接在本地文件系統中打開 HTML 文件，則會遇到跨域問題。

總的來說，JavaScript 讀取本地文件的方式還是比較簡單的。開發者可以根據實際情況選擇適合自己的方法，并進行一些小改動來滿足復雜的場景需求。