Passar variável PHP para JavaScript

Neste artigo você vai aprender a passar variável PHP para JavaScript, ou seja, resgatar o valor que vem do back-end para o front.

Fala programador(a), beleza? Bora aprender mais sobre como resgatar valores de variáveis PHP em JavaScript!

A ideia na verdade é bem simples, vamos receber primeiramente o valor em PHP ou atribuir o valor a alguma variável

Veja o exemplo:

<?php
 
 $teste = "Variável em PHP";
?>

E agora com valor já adicionando a uma variável de PHP, você precisa inserir com o auxílio de echo em uma variável JS

Isso será feito no bloco de script do seu código

Veja um exemplo:

<script>
 var teste = "<?php echo $teste; ?>"
</script>

Desta maneira o PHP será interpretado dentro das tags script normalmente

E por causa das duas aspas se transformará em texto, depois você pode manipular normalmente o dado sendo de JS já

Tome cuidado com as aspas, a ausência delas pode causar erros no seu código e então o mesmo vai parar de funcionar

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

Conclusão

Neste artigo você aprendeu a como passar variável PHP para JavaScript

Ou seja, utilizar os valores que vem do PHP em JavaScript, de uma forma que a linguagem consiga interpretar estes dados

Podemos passar os valores por meio da função echo, e não podemos esquecer das aspas para transformar o dado em uma string, ou seja, texto

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

E se o valor for um array ou um objeto?

Aqui mora a pegadinha mais comum

Com echo direto, um array vira aquele texto "Array" e nada funciona do outro lado

A saída é o json_encode, que transforma o dado PHP em um formato que o JavaScript já entende de nascença

<?php

$dados = [ "nome" => "Matheus", "nivel" => 2 ];

?>

<script> var dados = <?php echo json_encode($dados); ?>

console.log(dados.nome) </script>

Repara em um detalhe: aqui NÃO tem aspas em volta do echo

O json_encode já devolve o valor pronto no formato do JavaScript, com as aspas onde precisa ter

Se você colocar aspas por fora, o objeto vira uma string e você vai ter que dar um JSON.parse depois pra usar como objeto de novo

Legal né? 🙂

Por que as aspas quebram o código:

O PHP não sabe que aquele valor vai virar uma string no JavaScript

Ele só imprime o conteúdo, cru, no meio do seu script

Aí se o valor tiver uma aspa dentro (um nome tipo O’Brien, ou um texto com aspas duplas) a string do JS fecha na hora errada e o navegador acusa erro de sintaxe

O mesmo vale pra quebra de linha dentro do valor

Tome cuidado! Já me ferrei uma vez por causa disso, e o pior é que o erro aparece longe do lugar que você mexeu

A forma segura de escapar isso é deixar o json_encode montar o valor pra você, inclusive quando o dado é uma string simples:

<script> var teste = <?php echo json_encode($teste); ?> </script>

Assim o valor sai sempre válido, com aspa ou sem aspa dentro dele

Dá pra usar variável PHP dentro de um arquivo .js externo?

Essa é a dúvida que mais aparece, e a resposta curta é: não, do jeito que você está pensando

O PHP só é interpretado no arquivo que o servidor entrega como PHP

Um arquivo .js separado, por padrão, não passa pelo PHP: ele é servido como está, então aquele <?php echo … ?> chega literal no navegador e quebra tudo

O caminho é declarar a variável no bloco de script da própria página (aquele inline mesmo, do exemplo acima) e só depois carregar o seu arquivo externo

<script> var dados = <?php echo json_encode($dados); ?> </script>

<script src="app.js"></script>

Dentro do app.js você lê a variável normalmente

A ordem importa: o script inline precisa vir ANTES do externo, senão a variável ainda não existe na hora que o arquivo roda

Outro caminho: mandar o valor pelo HTML com data attributes

Se você não curte misturar PHP dentro do bloco de script, dá pra pendurar o dado no próprio HTML e ler depois pelo JavaScript

É como deixar um bilhete colado no elemento: o PHP escreve o bilhete, o JS lê quando precisar

<div id="app" data-nome="<?php echo htmlspecialchars($nome); ?>"></div>

<script> var nome = document.getElementById("app").dataset.nome

console.log(nome) </script>

O htmlspecialchars aí é pra escapar o valor e não estourar o atributo caso venha aspa no meio

Quando usar cada um? Valor simples ligado a um elemento da tela cai bem no data attribute

Estrutura maior, array, objeto, lista de itens: json_encode no script resolve melhor

E se o valor mudar depois que a página carregou?

Vale entender o limite do que a gente fez até aqui

O echo do PHP acontece uma vez só, na hora que a página é montada no servidor

Depois disso o valor está congelado no HTML: se o dado mudar no banco, a variável do JS continua com o valor velho até você recarregar

Pra dado que muda no meio do caminho, o jogo é outro: o JavaScript pede o dado pro servidor com fetch, e o PHP responde em JSON

Aí sim você atualiza a tela sem recarregar nada

Mas pro valor que já existe quando a página nasce, o echo continua sendo o caminho mais simples e direto

Perguntas frequentes:

Como passar uma variável PHP para uma função JavaScript?

Mesma ideia do exemplo: você imprime o valor com echo dentro da chamada da função, no bloco de script

O recomendado é usar json_encode no lugar de aspas manuais, assim o valor chega já no formato certo

minhaFuncao(<?php echo json_encode($teste); ?>)

Preciso de aspas em volta do echo?

Com echo puro sim, senão o valor vira código solto e quebra

Com json_encode não, porque ele já devolve o valor com as aspas certas

Dá pra fazer o contrário, passar variável do JavaScript pro PHP?

Não da mesma forma, porque o PHP roda antes do JavaScript existir

Pra ir na direção contrária você precisa ENVIAR o valor pro servidor: formulário, requisição com fetch, query string na URL

Por que aparece a palavra Array no lugar do meu dado?

Porque você tentou dar echo em um array

Use json_encode e o array chega do outro lado como array de verdade 🙂