Cara Mendeteksi Bahasa Browser dengan JavaScript [2023]

 

Mendeteksi bahasa browser adalah teknik yang berguna dalam pengembangan situs web untuk memberikan konten yang relevan dan disesuaikan dengan preferensi bahasa pengguna. Dalam artikel ini, kami akan memberikan panduan lengkap tentang cara mendeteksi bahasa browser dengan JavaScript. Dengan menggunakan teknik ini, Anda dapat meningkatkan pengalaman pengguna dan memastikan situs web Anda dapat diakses oleh audiens global.

Mengapa Mendeteksi Bahasa Browser Penting?

Mendeteksi bahasa browser menjadi penting karena preferensi bahasa setiap pengguna dapat berbeda-beda. Dengan mendeteksi bahasa yang dipilih oleh pengguna, Anda dapat menampilkan konten situs web dalam bahasa yang relevan, meningkatkan tingkat pemahaman dan keterlibatan, serta mengurangi hambatan komunikasi.

TUTORIAL :

Cara mendeteksi bahasa browser di javascript hanya dalam satu baris kode. Metode ini berfungsi di semua browser utama

const language = navigator.language || navigator.userLanguage;
// en-US

Jika Anda hanya membutuhkan dua huruf:

const language = (navigator.language || navigator.userLanguage).substr(0, 2)
// en

Cara mengubah bahasa di browser di Vue 3 dengan i18n

Contoh aplikasi vue ini menggunakan Komposisi API. Contoh kerja pada QR Code Contact

src/i18n.js

import { createI18n } from 'vue-i18n';

function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key).default;
    }
  });
  return messages;
}

export default createI18n({
  legacy: false,
  globalInjection: true,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
});

src/components/LanguageSelector.vue

<template>
  <div class="language-selector">
    <h3></h3>
    <img :src="imageFlag" alt="" />
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :key="`lang-${i}`" :value="lang">
        
      </option>
    </select>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';

const langs = ['en', 'ro'];
const { locale, t } = useI18n();

onMounted(() => {
// detect the language of browser
  i18n.global.locale.value = (navigator.language || navigator.userLanguage).substr(0, 2);
});

// eslint-disable-next-line import/no-dynamic-require, global-require
const imageFlag = computed(() => require(`@/assets/images/${locale.value}-flag.png`));
</script>

<style>
.language-selector {
  display: flex;
  align-items: center;
}

img {
  margin-left: 10px;
  margin-right: 10px;
}

select {
  width: 75px;
  line-height: 49px;
  height: 38px;
  font-size: 22px;
  outline: 0;
}
</style>

<i18n>
{
  "en": {
    "language": "Language",
  },
  "ro": {
    "language": "Limba",
  }
}
</i18n>