Como detectar a linguagem do usuário no navegador com JavaScript

Neste artigo você vai aprender a como detectar a linguagem do usuário no navegador com JavaScript, com uma linha de código!

Fala programador(a), beleza? Bora aprender a como trabalhar com as configurações do navegador e JavaScript!

Basicamente temos duas linguagens definidas no navegador: a preferida pelo usuário e também a que o navegador está configurado

A preferida seria como a linguagem nativa do mesmo, e a segunda uma configuração do próprio browser

Para resgatar a linguagem preferida pelo usuário o código é:

const language = window.navigator.userLanguage;

console.log(language);

Porém as vezes esta linguagem pode não estar definida, então o jeito é pegar a que está no navegador

Isto pode ser feito com este código:

const language = window.navigator.language;

console.log(language);

Desta maneira você consegue prever as duas situações, legal né? 🙂

Conclusão

Neste artigo você aprendeu a como detectar a linguagem do usuário no navegador com JavaScript

Utilizamos o objeto window e a propriedade navigator, que contém outras duas propriedades que definem a linguagem

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Que são: userLanguage e language

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Por que o valor pode vir vazio?

O navegador é o ambiente do usuário, não o teu

Tu não controla o que ele configurou, se está num PC emprestado, num celular ou num perfil recém instalado

Por isso o código de cima tem esse jeitão de plano A e plano B: se o primeiro valor não vier, o segundo segura a aplicação

É a mesma ideia de perguntar o idioma pra recepção do prédio: ela responde o que está no crachá dela, não necessariamente o que o visitante fala

Então nunca amarre a decisão de idioma em UM valor só, sempre tenha um padrão pra cair quando nada vier

Tome cuidado! Valor vazio não quebra a tela, ele só entrega a interface no idioma errado, e isso é bem mais difícil de perceber

Detectou o idioma, e agora? Deixa o usuário trocar:

Detecção é palpite, não é certeza

A pessoa pode estar viajando, usando a máquina da empresa configurada em inglês e mesmo assim querer ler em português

Aí a regra que salva é simples: use a detecção só como valor INICIAL

Se o usuário trocar na mão, essa escolha vence e fica guardada pra próxima visita

E cuidado com redirecionamento automático: jogar a pessoa em outra versão do site sem caminho de volta é o tipo de coisa que faz ela fechar a aba

Se liga nisso: um seletor de idioma visível resolve mais problema que qualquer detecção esperta

Faça o teste antes de confiar:

O código é curto, o chato é o mundo real

Antes de amarrar regra de negócio nisso, joga o valor no console e abre em mais de um lugar: outro navegador, aba anônima e o celular

Bora ver na prática? Roda os console.log dos exemplos acima em cada um desses cenários e compara o resultado

Duas coisas pra observar: o valor apareceu mesmo em todos eles, e ele veio no formato que o teu if espera

Já me ferrei com isso: comparar o valor cru com igualdade exata funciona lindamente na tua máquina e falha na do usuário

Normaliza antes de comparar e trata o caso de não vir nada, aí sim dá pra confiar

E se você pedir isso pro assistente de IA?

Hoje quase ninguém digita esse trecho na mão, a maioria pede pro assistente de IA e segue a vida

Só que aí o risco muda de lugar

O assistente entrega a detecção rapidinho e, no mesmo impulso, espalha texto fixo pelos componentes, no melhor estilo vibe coder

Resultado: tu tem a linguagem detectada e nada pra fazer com ela, porque as frases estão cravadas na tela

Quando for pedir, peça o pacote completo: a detecção, o valor padrão pra quando não vier nada, o ponto ÚNICO onde o idioma é trocado e os textos morando fora do componente

Uma linha de detecção qualquer modelo escreve, o que separa o código que aguenta usuário de verdade é o que vem depois dela

Por que o valor pode vir vazio?

O navegador é o ambiente do usuário, não o teu

Tu não controla o que ele configurou, se está num PC emprestado, num celular ou num perfil recém instalado

Por isso o código de cima tem esse jeitão de plano A e plano B: se o primeiro valor não vier, o segundo segura a aplicação

É a mesma ideia de perguntar o idioma pra recepção do prédio: ela responde o que está no crachá dela, não necessariamente o que o visitante fala

Então nunca amarre a decisão de idioma em UM valor só, sempre tenha um padrão pra cair quando nada vier

Tome cuidado! Valor vazio não quebra a tela, ele só entrega a interface no idioma errado, e isso é bem mais difícil de perceber

Detectou o idioma, e agora? Deixa o usuário trocar:

Detecção é palpite, não é certeza

A pessoa pode estar viajando, usando a máquina da empresa configurada em inglês e mesmo assim querer ler em português

Aí a regra que salva é simples: use a detecção só como valor INICIAL

Se o usuário trocar na mão, essa escolha vence e fica guardada pra próxima visita

E cuidado com redirecionamento automático: jogar a pessoa em outra versão do site sem caminho de volta é o tipo de coisa que faz ela fechar a aba

Se liga nisso: um seletor de idioma visível resolve mais problema que qualquer detecção esperta

Faça o teste antes de confiar:

O código é curto, o chato é o mundo real

Antes de amarrar regra de negócio nisso, joga o valor no console e abre em mais de um lugar: outro navegador, aba anônima e o celular

Bora ver na prática? Roda os console.log dos exemplos acima em cada um desses cenários e compara o resultado

Duas coisas pra observar: o valor apareceu mesmo em todos eles, e ele veio no formato que o teu if espera

Já me ferrei com isso: comparar o valor cru com igualdade exata funciona lindamente na tua máquina e falha na do usuário

Normaliza antes de comparar e trata o caso de não vir nada, aí sim dá pra confiar

E se você pedir isso pro assistente de IA?

Hoje quase ninguém digita esse trecho na mão, a maioria pede pro assistente de IA e segue a vida

Só que aí o risco muda de lugar

O assistente entrega a detecção rapidinho e, no mesmo impulso, espalha texto fixo pelos componentes, no melhor estilo vibe coder

Resultado: tu tem a linguagem detectada e nada pra fazer com ela, porque as frases estão cravadas na tela

Quando for pedir, peça o pacote completo: a detecção, o valor padrão pra quando não vier nada, o ponto ÚNICO onde o idioma é trocado e os textos morando fora do componente

Uma linha de detecção qualquer modelo escreve, o que separa o código que aguenta usuário de verdade é o que vem depois dela