Navigator.language 的全面解析

在網站開發中，語言是一個非常重要的問題，它不僅決定了網站的展示效果，還關係到用戶的體驗和交互模式。而瀏覽器提供了一個非常便捷的 API 用來獲取瀏覽器的語言信息 – navigator.language，本文將從多個方面對此進行詳細解析。

一、語法與默認值

關於 navigator.language 的語法非常簡單，它返回一個字元串，表示瀏覽器的語言。而在沒有設置語言時，瀏覽器默認使用操作系統的語言（其實是瀏覽器的語言偏好設置）作為默認值來返回語言信息。

const language = navigator.language;
console.log(language); // "zh-CN"

二、不同瀏覽器對語言的解析

雖然 navigator.language 是 W3C 標準，但是不同的瀏覽器對它的解析規則可能不一樣。比如，在 Safari 中，navigator.language 可能返回 MacOS 系統的語言設置，而不是瀏覽器的語言偏好設置。

為了解決這個問題，我們可以藉助於其他屬性來輔助語言解析，比如 navigator.browserLanguage 或者 navigator.userLanguage。這兩個屬性分別用來代表瀏覽器界面的語言和用戶在瀏覽器中選用的語言。當然，它們都只有在 IE 和 Safari 中才有支持。

const language = navigator.language || navigator.browserLanguage || navigator.userLanguage;
console.log(language); // "zh-CN"

三、對多語言支持的影響

在多語言場景下，navigator.language 就會顯得尤為重要。通常我們需要根據瀏覽器語言的不同，展示不同的頁面或者是資料。因此，我們往往需要把 navigator.language 與後端的多語言資源做對比相互協調。而在瀏覽器端，我們可以通過 navigator.language 來識別用戶所使用的語言從而展示對應的頁面或者進行相應的操作。

const language = navigator.language;
if (language.startsWith('en')) {
   // 展示英文版網站
} else {
   // 展示中文網站
}

四、其他常用的關於語言的 API

除了 navigator.language，還有一些與語言相關的 API 值得我們注意。比如 navigator.languages，它返回的是一個字元串數組，包含了從瀏覽器偏好中獲取的所有語言，而不是只包括首選語言。而 navigator.language 和 navigator.languages 的區別在於前者只返回首選語言。

另外，在 WebRTC 實時通信中，有一個非常重要的 API：RTCPeerConnection.addTransceiver。它的第二個參數為 options，其中包括了一個可選的 codec 屬性。codec 屬性中包含了編碼和解碼格式，包括了與語言相關的內容，比如音頻的採樣率。

const rtcPeerConnection = new RTCPeerConnection();
const transceiver = rtcPeerConnection.addTransceiver('audio', {
  codec: {
     samplerate: 48000,
     channels: 2,
     sdpFmtpLine: 'a=fmtp:111',
  }
});

五、總結

navigator.language 在前端開發中起著非常重要的作用，它能夠幫助我們快速識別用戶所使用的語言，從而實現更好的用戶體驗和交互模式。希望本文對您有所啟示，也希望您可以在實際開發中更好地運用這些 API。