首頁 web前端 js教程 使用Node.js處理前端程式碼檔案的編碼問題_node.js

使用Node.js處理前端程式碼檔案的編碼問題_node.js

May 16, 2016 pm 03:15 PM
javascript node 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');
}
登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

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

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

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

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

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

知識圖譜:大模型的理想搭檔 知識圖譜:大模型的理想搭檔 Jan 29, 2024 am 09:21 AM

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

Pi Node教學:什麼是Pi節點?如何安裝和設定Pi Node? Pi Node教學:什麼是Pi節點?如何安裝和設定Pi Node? Mar 05, 2025 pm 05:57 PM

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

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

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

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

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

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

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

See all articles