Как передать переменную PHP в JavaScript без ошибок и экранирования

Правильный способ: используем json_encode()

Самый надёжный и универсальный способ передать любую PHP-переменную в JavaScript — это использовать встроенную функцию json_encode(). Она автоматически преобразует PHP-значение в корректный JavaScript-код, экранируя все опасные символы: кавычки, апострофы, переводы строк, обратные слеши и управляющие символы.

<?php
$username = "О'Коннор";
$message = "Привет!\nКак дела?";
$age = 25;
$isAdmin = true;
$tags = ["php", "javascript", "web"];
$config = ["theme" => "dark", "lang" => "ru"];
?>

<script>
    // Простая строка
    var username = <?php echo json_encode($username); ?>;
    
    // Строка с переносом строки
    var message = <?php echo json_encode($message); ?>;
    
    // Число
    var age = <?php echo json_encode($age); ?>;
    
    // Булево значение
    var isAdmin = <?php echo json_encode($isAdmin); ?>;
    
    // Массив
    var tags = <?php echo json_encode($tags); ?>;
    
    // Ассоциативный массив (объект)
    var config = <?php echo json_encode($config); ?>;
    
    // Использование в консоли
    console.log(username); // "О'Коннор"
    console.log(message);  // "Привет!\nКак дела?" (с корректным переносом)
    console.log(tags);     // ["php","javascript","web"]
    console.log(config);   // {"theme":"dark","lang":"ru"}
</script>

Почему это работает?

json_encode() автоматически:

• Экранирует одинарные и двойные кавычки
• Преобразует переводы строк в \n (корректно для JavaScript)
• Экранирует обратные слеши
• Корректно обрабатывает Unicode (русские буквы, эмодзи)
• Преобразует PHP-типы в соответствующие JS-типы:
  • string → string
  • int/float → number
  • bool → boolean
  • null → null
  • array → array (для индексированных) или object (для ассоциативных)

Дополнительные флаги для безопасности

Для веб-страниц рекомендуется использовать флаг JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP, который экранирует HTML-спецсимволы и предотвращает XSS-атаки:

<?php
$unsafeString = "<script>alert('XSS')</script>";
?>
<script>
    // Безопасный вариант
    var safe = <?php echo json_encode($unsafeString, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
    // В переменной safe будет экранированная строка, которая не выполнится как HTML/JS
</script>

Альтернативный способ: атрибуты data-*

Если вы не хотите смешивать PHP и JS в одном файле, можно передавать данные через HTML-атрибуты:

<!-- index.php -->
<div id="user-data" 
     data-username="<?php echo htmlspecialchars($username, ENT_QUOTES, 'UTF-8'); ?>"
     data-age="<?php echo $age; ?>">
</div>

<script>
    var element = document.getElementById('user-data');
    var username = element.dataset.username;  // "О'Коннор"
    var age = parseInt(element.dataset.age);  // 25
</script>

Чего делать НЕ стоит

• Не используйте просто echo $var — это приводит к синтаксическим ошибкам при наличии кавычек.
• Не используйте addslashes() — он не обрабатывает все случаи (например, Unicode).
• Не используйте ручное экранирование через str_replace — забудете про один символ, и сайт сломается.

Итог: json_encode() — это стандарт де-факто для передачи данных из PHP в JavaScript. Он безопасен, прост и работает с любыми типами данных.

<!-- index.html -->
<button onclick="loadUser()">Загрузить пользователя</button>
<div id="output"></div>

<script>
function loadUser() {
    fetch('get_user.php?id=1')
        .then(response => response.json())
        .then(data => {
            document.getElementById('output').innerHTML = 
                'Имя: ' + data.username + ', Возраст: ' + data.age;
        })
        .catch(error => console.error('Ошибка:', error));
}
</script>

<?php
// get_user.php
header('Content-Type: application/json');

$userId = isset($_GET['id']) ? intval($_GET['id']) : 0;
$user = [
    'id' => $userId,
    'username' => "О'Коннор",
    'age' => 25,
    'message' => "Привет!\nКак дела?"
];

echo json_encode($user, JSON_UNESCAPED_UNICODE);
?>