Строки в JavaScript
Вы уже знаете, что значение может быть string. Этот урок про текст: писать в кавычках, считать символы, склеивать части, вставлять кавычку внутрь и показывать сообщение на странице. Инструменты вроде slice и toUpperCase — на следующем уроке.
Как работают строки в JavaScript?
Строка — это текст, который движок считает одним значением. Пишите её в одинарных, двойных кавычках или в обратных (`). "Привет" и 'Привет' — строки; 42 без кавычек — число. Свойство length даёт число символов (пробелы тоже считаются). Склеивайте через +, или собирайте строку template literal с ${…}. Обратный слэш (\) позволяет ту же кавычку внутри. Для показа пользователю используйте textContent.
Набор инструментов для строк
📊 Текстовые инструменты, которые нужны новичкам первыми
| Идея | Пример | Результат / заметка |
|---|---|---|
| Двойные кавычки | let s = "Hi"; |
Тип string |
| Одинарные кавычки | let s = 'Hi'; |
Тот же тип string |
length |
"Hi".length |
2 (символа) |
Склейка через + |
"Hi" + "!" |
"Hi!" |
| Экранирование | "Say \"hi\"" |
Кавычка внутри того же стиля |
| Template | ` Hi, ${name} ` |
Подставляет значение name |
Пишите текст в кавычках
Выберите стиль и закройте тем же. "" — допустимая пустая строка.
let greeting = "Hello";
let city = 'Tehran';
console.log(greeting);
console.log(city);
console.log(typeof greeting);
Считайте символы через length
length — свойство, не функция: пишите .length, не .length(). Пробелы тоже символы.
let word = "JavaScript";
console.log(word.length);
console.log("Hi there".length);
Склеивайте строки через +
Оператор + склеивает текст. Если одна сторона — строка, другая часто становится текстом: "Score: " + 10 даёт "Score: 10". Помните это, смешивая числа и текст.
let first = "Ada";
let last = "Lovelace";
let full = first + " " + last;
console.log(full);
console.log("Score: " + 10);
Кавычка внутри строки
Два простых пути: сменить стиль кавычек или экранировать обратным слэшем.
let a = "She said \"hello\"";
let b = 'It\'s ready';
console.log(a);
console.log(b);
Template literals (обратные кавычки)
Обратные кавычки позволяют писать строку и вставлять значения через ${…} — удобно для сообщений со словами и переменными.
let name = "Sam";
let line = `Hello, ${name}!`;
console.log(line);
Покажите строку на странице
Соберите сообщение и присвойте через textContent, чтобы абзац показал обычный текст.
<!DOCTYPE html>
<html>
<head>
<title>Strings — greeting on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let user = "guest";
let msg = `Welcome, ${user}!`;
document.getElementById("out").textContent = msg;
</script>
</body>
</html>
Абзац показывает приветствие. Измените только user, обновите страницу и проверьте новую строку.
Попробуйте сами
- Создайте
letв двойных и в одинарных кавычках; выведите оба иtypeof. - Выведите
.lengthдля"JavaScript"и короткой фразы с пробелом. - Склейте имя и фамилию через
+и пробел; выведите результат. - Напишите строку с апострофом или двойной кавычкой (экранирование или смена стиля).
- Соберите
`Hello, ${name}!`сlet nameи выведите. - В HTML-демо измените только
user, обновите и прочитайте новое приветствие.
Частые ошибки
let s = Hello;без кавычек — движок ищет переменнуюHello- Открыть
"и закрыть'(или наоборот) - Вызывать
length()как функцию — нужен.length - Ждать, что
"5" + 5всегда сложение чисел — со строкой+часто склеивает - Слишком рано прыгать ко множеству методов строк (они дальше)
Кратко
- Строки — текст в
'…',"…"или`…` lengthсчитает символы; это свойство- Склеивайте через
+или используйте template literals с${…} - Экранируйте такие же кавычки через
\или смените стиль - Дальше: методы строк — например
slice,replaceи регистр
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху