使用Node.js處理前端程式碼檔案的編碼問題_node.js
使用 NodeJS 編寫前端工具時,操作得最多的是文字文件,因此也就涉及了文件編碼的處理問題。我們常用的文字編碼有 UTF8 和 GBK 兩種,而 UTF8 檔案也可能帶有 BOM。在讀取不同編碼的文字檔案時,需要將檔案內容轉換為 JS 使用的 UTF8 編碼字串後才能正常處理。
BOM 的移除
BOM 用於標記一個文字檔案使用 Unicode 編碼,其本身是一個 Unicode 字元("uFEFF"),位於文字檔案頭部。在不同的 Unicode 編碼下,BOM 字元對應的二進位位元組如下:
Bytes Encoding ---------------------------- FE FF UTF16BE FF FE UTF16LE EF BB BF UTF8
因此,我們可以根據文字檔案頭幾個位元組等於啥來判斷檔案是否包含 BOM,以及使用哪種 Unicode 編碼。但是,BOM 字元雖然起到了標記檔案編碼的作用,其本身卻不屬於檔案內容的一部分,如果讀取文字檔案時不去掉 BOM,在某些使用場景下就會有問題。例如我們把幾個 JS 檔案合併成一個檔案後,如果檔案中間含有 BOM 字符,就會導致瀏覽器 JS 語法錯誤。因此,使用 NodeJS 讀取文字檔時,一般需要去掉 BOM。例如,以下程式碼實現了識別和去除 UTF8 BOM 的功能。
function readText(pathname) { var bin = fs.readFileSync(pathname); if (bin[0] === 0xEF && bin[1] === 0xBB && bin[2] === 0xBF) { bin = bin.slice(3); } return bin.toString('utf-8'); }
GBK 轉 UTF8
NodeJS 支援在讀取文字檔案時,或在 Buffer 轉換為字串時指定文字編碼,但遺憾的是,GBK 編碼不在NodeJS自身支援範圍內。因此,一般我們會用 iconv-lite 這個三方套件來轉換編碼。使用 NPM 下載套件後,我們可以按邊方式編寫一個讀取 GBK 文字檔案的函數。
var iconv = require('iconv-lite'); function readGBKText(pathname) { var bin = fs.readFileSync(pathname); return iconv.decode(bin, 'gbk'); }
單字節編碼
有時候,我們無法預知需要讀取的檔案採用哪一種編碼,因此也就無法指定正確的編碼。例如我們要處理的某些 CSS 檔案中,有的用 GBK 編碼,有的用 UTF8 編碼。雖然可以一定程度可以根據文件的位元組內容猜測出文字編碼,但這裡要介紹的是有些局限,但是要簡單得多的一種技術。
首先我們知道,如果一個文字檔案只包含英文字符,例如 Hello World,那麼無論用 GBK 編碼或是 UTF8 編碼讀取這個檔案都是沒問題的。這是因為在這些編碼下,ASCII0~128 範圍內字元都使用相同的單字節編碼。
反過來講,即使一個文本文件中有中文等字符,如果我們需要處理的字符僅在ASCII0~128 範圍內,比如除了註釋和字符串以外的JS代碼,我們就可以統一使用單字節編碼來讀取文件,不用關心文件的實際編碼是GBK 還是UTF8。以下範例說明了這種方法。
1. GBK編碼原始檔內容:
var foo = '中文';
2. 對應位元組:
76 61 72 20 66 6F 6F 20 3D 20 27 D6 D0 CE C4 27 3B
3. 使用單字節編碼讀取後得到的內容:
var foo = '{乱码}{乱码}{乱码}{乱码}';
4. 替換內容:
var bar = '{乱码}{乱码}{乱码}{乱码}';
5. 使用單字節編碼儲存後對應位元組:
76 61 72 20 62 61 72 20 3D 20 27 D6 D0 CE C4 27 3B
6. 使用 GBK 編碼讀取後得到內容:
var bar = '中文';
這裡的訣竅在於,不管大於 0xEF 的單個字節在單字節編碼下被解析成什麼亂碼字符,使用同樣的單字節編碼保存這些亂碼字符時,背後對應的字節保持不變。
NodeJS 中自帶了一種 binary 編碼可以用來實現這個方法,因此在下例中,我們使用這種編碼來演示上例對應的程式碼該怎麼寫。
function replace(pathname) { var str = fs.readFileSync(pathname, 'binary'); str = str.replace('foo', 'bar'); fs.writeFileSync(pathname, str, 'binary'); }

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

大型語言模式(LLM)具有產生流暢和連貫文字的能力,為人工智慧的對話、創意寫作等領域帶來了新的前景。然而,LLM也存在一些關鍵限制。首先,它們的知識僅限於從訓練資料中辨識出的模式,缺乏對世界的真正理解。其次,推理能力有限,不能進行邏輯推理或從多個資料來源融合事實。面對更複雜、更開放的問題時,LLM的回答可能變得荒謬或矛盾,被稱為「幻覺」。因此,儘管LLM在某些方面非常有用,但在處理複雜問題和真實世界情境時,仍存在一定的限制。為了彌補這些差距,近年來出現了檢索增強生成(RAG)系統,其核心思想是

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點,並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後,成為眾多先鋒積極參與測試的重要環節,為即將到來的主網發布做準備。如果您還不了解PiNetwork,請參考Pi幣是什麼?上市價格多少? Pi用途、挖礦及安全性分析。什麼是PiNetwork? PiNetwork項目始於2019年,擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest
