告別手動翻譯！如何利用 Google Sheets 打造自動化多國語系 (i18n)

前言

再開始實作多國語系開發前，先看看以下會遇到的問題：

一、 人為操作失誤與維護成本

若採取傳統的手動翻譯模式，開發者往往需要在 Excel/Google 試算表與程式碼 JSON 檔之間頻繁進行「複製與貼上」。

  • 潛在風險： 這種純手工過程極易發生漏掉逗點、引號或括號等人為失誤，進而導致語法錯誤使整個語系檔失效。
  • 維護難度： 當專案規模擴大，逐一比對錯誤將耗費大量 debug 時間，嚴重影響開發效率。

二、 語系切換後的介面適應性（破版問題）

不同語言的字元長度差異極大（例如：德文通常比英文長，英文又比中文長）。

設計對策： 在開發初期就需考量 UI 的彈性（如使用 Flexbox/Grid 佈局），並確保容器具備良好的自適應擴充性，以避免因字數變化破壞使用者體驗。

排版挑戰： 語系切換後，常因翻譯內容過長導致按鈕溢出、文字重疊或跑版。

第一步：建立自動化翻譯工作表

在 Google 試算表中，先在你的第一欄寫下「Key」，「Key」是程式碼要讀取的身分證，後續各欄則是對應的翻譯。

第二步：接續欄位如何透過函式撰寫來自動翻譯？

利用內建的 =GOOGLETRANSLATE 函式，直接在儲存格內完成翻譯。

=GOOGLETRANSLATE(B8為要翻譯的欄位, "en為來源語系", "zh-tw為目標語系")1
  • B8：原文所在的儲存格。
  • “en”：代表英文（來源）。
  • “zh-tw”：代表繁體中文（目標）

在還沒有專業翻譯人員介入前，能快速填補介面文案，預覽排版效果。

第三步：有了這些翻譯，你還需要計算字數長度比例

翻譯成不同語言後，字數通常會增減（例如德文通常比英文長），這會影響 UI 設計。透過計算長度比例，可以提早發現文字是否會溢出。

=(LEN(C8翻譯後儲存格) / LEN(B8原文儲存格))
  • LEN()：用來計算字串長度的函式。

透過相除得到百分比，協助設計師判斷空間是否足夠。

以下是我幫各位做好的各國語系代碼對應表格，方便各位使用：

語系名稱代碼 (BCP 47)
繁體中文 (台灣)zh-TW
繁體中文 (香港)zh-HK
簡體中文 (中國)zh-CN
英文 (美國)en-US
英文 (英國)en-GB
日文ja-JP
韓文ko-KR
法文fr-FR
德文de-DE
西班牙文es-ES

第四步：從試算表到專案

匯出格式：為什麼首選 JSON？

在多國語系實作中，JSON (JavaScript Object Notation) 是目前業界最通用的媒介，原因如下：

結構清晰： 採用 Key-Value (鍵值對) 形式，非常適合對應「語系代碼」與「翻譯內容」。

原生支援： JavaScript 與現代前端框架（React, Vue, Angular）皆能原生解析 JSON，不需額外的編譯成本。

階層化管理： 支援巢狀結構（Nested Objects），方便將翻譯依照頁面（如 home, login）進行分類，避免命名衝突。

轉換工具推薦：從手動到自動化

手動轉換
線上 CSV to JSON 轉換器
適合小型專案或一次性匯入。
將 Google 試算表另存為 .csv 檔，上傳至線上轉換工具 連結工具。

進階寫腳本轉換
Google Apps Script (GAS) 一鍵產出 JSON
這是目前最推薦的「半自動化」方案。您可以直接在 Google 試算表中撰寫一段簡單的腳本，將表格內容瞬間轉化為 JSON 字串。

實作腳本範例：

function exportTofreeJSON() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  const keys = data[0]; // 第一欄通常是 Key (如: common.save)
  const result = {};

  // 假設第二欄開始是各國語系 (en, zh-TW...)
  for (let j = 1; j < keys.length; j++) {
    const lang = keys[j];
    result[lang] = {};
    for (let i = 1; i < data.length; i++) {
      result[lang][data[i][0]] = data[i][j];
    }
  }
  
  // 在側邊欄顯示 JSON，方便複製
  const jsonString = JSON.stringify(result, null, 2);
  const html = HtmlService.createHtmlOutput('<pre>' + jsonString + '</pre>')
    .setWidth(600).setHeight(500);
  SpreadsheetApp.getUi().showModalDialog(html, '匯出成果');
}

程式碼範例：展示一個標準的 i18n JSON 結構：

{
  "homepage": {
    "title": "歡迎來到我的網站",
    "desc": "這是一個自動化範例"
  }
}

結語

  • 工程師不再需要等翻譯官。
  • PM 可以直接在 Sheets 修改文案，不用動到程式碼。
  • 最後的溫馨叮嚀：Google 翻譯雖然快，但上線前建議還是要請人工校閱。

標籤