Строки в JavaScript
2026-02-21 08:46 Diff
https://skillbox.ru/media/code/stroki-v-javascript/

#статьи

  • 22 июл 2025
  • 0

Расскажем, как создавать, изменять и использовать строки для решения различных задач.

Иллюстрация: Оля Ежак для Skillbox Media

Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

Строки — это один из основных типов данных в JavaScript. Они используются для хранения и обработки текста: сообщений, имён пользователей, данных из форм и многого другого. Строки встречаются очень часто, они нужны буквально везде.

Содержание

В JavaScript строка (тип данных string) — это упорядоченный набор символов. Она может содержать:

  • буквы и цифры;
  • пробелы и знаки препинания;
  • специальные символы вроде \n (перенос строки) и \t (табуляция);
  • любые символы из Unicode, включая эмодзи.

Этот тип данных позволяет хранить и обрабатывать текст в программах. С его помощью можно работать с именами пользователей, сообщениями, адресами сайтов, HTML‑кодом и другими текстовыми данными.

Строки используются для вывода информации на экран, хранения данных, формирования URL и обмена данными между программами. Почти всё, что видит пользователь в браузере или что отправляется на сервер, так или иначе представлено в виде string.

Примеры строк:

let empty = ""; // Пустая строка let str = "Это строка с \"кавычками\" и \\обратным слешем\\."; let ascii = "Hello, World!"; // Только ASCII-символы

В строках можно хранить не только обычный текст, но и код, например HTML или JSON:

let html = "<div class='container'>Это контейнер</div>"; let json = '{"name": "John", "age": 30}';

Есть два способа записи строк: простые однострочные и многострочные шаблонные. Вид строки выбирают в зависимости от задачи: где-то важно встроить переменную, где-то — сохранить форматирование или удобочитаемость.

Это текст, записанный в одинарные ('...') или двойные ("...") кавычки. Внутри строки можно использовать любые символы, кроме тех, что совпадают с выбранными кавычками. Чтобы добавить такие кавычки внутрь строки, нужно использовать экранирование, то есть поставить перед кавычкой знак слеша \.

let single = 'Это простая строка'; let double = "Это тоже простая строка"; let escaped = "Он сказал: \"Да!\"";

В простых строках перенос нельзя записать напрямую — для этого нужно использовать специальный символ \n. Он указывает на то, что в этом месте текст должен перейти на новую строку при выводе или обработке.

let withNewline = "Первая строка\nВторая строка";

Это ещё один способ создания строк. Шаблонные строки заключаются в обратные кавычки (`...`).

Вставка переменных и выражений. В обычных строках для вставки переменных используется метод склейки, или конкатенация, в шаблонных строках вместо этого используется конструкция ${...}:

let name = "Анна"; let greeting = `Привет, ${name}!`; console.log(greeting); // Привет, Анна!

Автоматическое преобразование типов. Когда в шаблонной строке внутри конструкции ${...} используется переменная или выражение, которое не является строкой (например, число, булево значение или объект), JavaScript автоматически преобразует это значение в строку с помощью метода toString(), чтобы его можно было вставить в текст.

let count = 3; // Создаём переменную count и присваиваем ей число 3 // Создаём шаблонную строку с текстом и вставкой переменной count // JavaScript берёт значение переменной count(3) и автоматически вставляет его в строку вместо ${count}` let message = `Количество товаров: ${count}`; // Выводим готовую строку в консоль console.log(message); // Результат: "Количество товаров: 3"

JavaScript сам преобразует число 3 в строку, чтобы вставить его в текст. Это происходит автоматически, поэтому можно подставлять любые значения и не преобразовывать их вручную.

Внутри шаблонной строки можно использовать одинарные и двойные кавычки без экранирования. Экранирование требуется только для обратных кавычек (``) и символа доллара с фигурными скобками (${}).

let text = `Он сказал: "Это 'пример' текста"`; let escaped = `Экранированная обратная кавычка: \``;

В обычных строках перенос строки нельзя сделать напрямую. Для этого приходится писать \n. С шаблонными строками переносы можно добавлять прямо в коде — нажатием Enter.

let message = `Это многострочная строка в JavaScript.`; console.log(message);

Результат:

Это многострочная строка в JavaScript.

Неизменяемость (immutability). В JavaScript строки неизменяемы. Это значит, что, как только строка создана, её содержимое нельзя поменять. Если вы попытаетесь изменить символ или часть строки, это не сработает — JavaScript вместо этого создаст новую строку с результатом изменений.

let text = "Привет"; text[0] = "п"; // Попытка заменить первую букву console.log(text); // "Привет" — строка не изменилась

Чтобы изменить строку, нужно создать новую:

let newText = text.replace("П", "п"); console.log(newText); // "привет"

Такое свойство делает работу бе��опаснее — что бы функция ни делала со строкой, исходная строка останется нетронутой. К тому же благодаря неизменяемости одну и ту же строку можно использовать в разных местах программы.

Индексация. Каждый символ в строке имеет свой порядковый номер — индекс. Отсчёт начинается с нуля: первый символ — индекс 0, второй — индекс 1 и так далее. Последний символ всегда имеет индекс, равный длине строки минус один.

Чтобы получить доступ к символу по индексу, используйте квадратные скобки:

let str = "JavaScript"; console.log(str[0]); // "J" — первый символ console.log(str[4]); // "S" — пятый символ console.log(str[9]); // "t" — последний символ

Это свойство полезно при проверке формата данных, например первой буквы в имени и в задачах на обработку текста: при переворачивании строки, поиске определённых символов и тому подобном.

Длина строки. Свойство length показывает количество символов в строке. Это число включает все буквы, цифры, пробелы и спецсимволы.

let message = "Hello, world!"; console.log(message.length); // 13

Свойство length доступно только для чтения, и ему нельзя присвоить новое значение:

let word = "Привет!"; word.length = 4; console.log(word); // "Привет!" console.log(word.length); // 7

Если строка пустая, length равен 0.

Это свойство может быть полезно, если нужно узнать размер текста перед обработкой. Ещё его можно использовать для проверки пользовательского ввода: достаточно ли длинный пароль, не превышает ли текст лимит.

Тип данных. В JavaScript строки — это примитивный тип данных. Они хранятся как простые значения и не являются объектами. Но при вызове метода вроде toUpperCase() или trim() JavaScript временно превращает строку в объект String, выполняет метод, а затем удаляет этот объект. Это происходит незаметно для разработчика.

В JavaScript строки можно объединять в одну с помощью оператора +. Этот процесс называется конкатенацией. Когда два текста соединяются, получается новая строка, в которой содержатся тексты обеих частей.

Пример простого склеивания:

let firstName = "Анна"; let lastName = "Иванова"; let fullName = firstName + " " + lastName; console.log(fullName); // "Анна Иванова"

Здесь между именем и фамилией мы добавили пробел, указав его как отдельную строку " ".

Можно объединять строки с переменными, при этом нестроковые переменные будут переведены в строки:

let itemCount = 5; let message = "Количество смартфонов: " + itemCount; console.log(message); // "Количество смартфонов: 5"

Чтобы добавить текст в конец другой строки, можно использовать оператор += (присваивание с конкатенацией):

let orderInfo = "Заказ содержит "; orderInfo += 10; orderInfo += " товаров"; console.log(orderInfo); // "Заказ содержит 10 товаров"

Шаблонные строки. Мы уже говорили об этом способе раньше. Шаблонные строки удобнее, если текст большой или содержит много переменных. Они делают код более читаемым и избавляют от лишних плюсов.

let name = "Анна"; let age = 25; let message = `Привет, ${name}! Тебе уже ${age} лет.`; console.log(message); // "Привет, Анна! Тебе уже 25 лет."

Иногда нужно изменить строку: удалить или заменить её части, добавить новые элементы. Прямо со строкой это сделать нельзя, потому что этот тип данных неизменяем. Поэтому сначала текст превращают в массив. После того как все изменения внесены, массив снова собирают в строку.

Для этого используют методы:

  • split() — преобразует строку в массив.
  • join() — преобразует массив в строку.

Разберёмся, как они пишутся и когда применяются.

Метод split() используется, чтобы разбить строку на части и сохранить их в виде массива. Исходная строка при этом не меняется. Метод принимает два параметра:

  • separator — символ или подстрока, по которой нужно делить строку;
  • limit (необязательный параметр) — максимальное количество элементов в массиве.

Если не задать limit, строка будет разбита на все возможные части.

Метод работает так: он ищет в строке разделитель, отделяет всё, что идёт до него, и добавляет это в массив. Далее обрабатывает оставшуюся часть строки. Это продолжается до тех пор, пока не закончится строка или не будет достигнут лимит элементов.

Например, у нас есть данные пользователя.

let csvData = "Анна,25,Екатеринбург,example@gmail.com";

Нам нужно вывести данные в таком виде:

Имя: Анна Возраст: 25 Город: Екатеринбург e-mail: example@gmail.com

Используем метод split() и превратим строку csvData в массив:

let result = csvData.split(","); console.log(result); // ["Анна", "25", "Екатеринбург", "example@gmail.com"]

Метод split() делит строку на части по запятой и преобразует их в элементы массива result .

Теперь выводим каждый элемент массива по индексу:

console.log("Имя: " + result[0]); // Имя: Анна console.log("Возраст: " + result[1]); // Возраст: 25 console.log("Город: " + result[2]); // Город: Екатеринбург console.log("e-mail: " + result[3]); // e-mail: example@gmail.com

В отличие от строк, элементы массива можно изменять, просто обращаясь к ним по индексу.

Предположим, у нас есть строка:

let input = "item1 item2 item3 item4";

Здесь элементы разделены пробелами. Чтобы превратить текст в массив, используем метод split(" ") с пробелом в качестве разделителя:

let result = input.split(" "); console.log(result); // ["item1", "item2", "item3", "item4"]

В результате получаем массив:

["item1", "item2", "item3", "item4"]

Допустим, строка разделена точками с запятой:

let input = "part1;part2;part3;part4";

Нам нужно получить только первые три элемента. В этом случае можно использовать метод split(";", 3):

let result = input.split(";", 3); console.log(result); // ["part1", "part2", "part3"]

Здесь текст разбивается максимум на три части, а остальное отбрасывается.

Пустые строки в массиве. Если разделитель стоит в начале или в конце текста, split() добавит пустые элементы:

let str = ",a,b,c,"; let result = str.split(","); console.log(result); // ["", "a", "b", "c", ""]

Разделение на символы. Если передать в split() пустую строку ("") в качестве разделителя, то каждая буква станет отдельным элементом массива:

let str = "JavaScript"; let result = str.split(""); console.log(result); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]

Без аргумента. Если вызвать split() без параметров, строка не разделяется:

let str = "JavaScript"; let result = str.split(); console.log(result); // ["JavaScript"]

Метод join() используется для объединения всех элементов массива в одну строку. Он имеет один необязательный аргумент — разделитель, который вставляется между элементами.

Синтаксис метода выглядит так:

array.join(separator)
  • array — массив, элементы которого нужно объединить.
  • separator — строка, вставляемая между элементами. Это может быть символ, слово, фраза, пустая строка или вообще ничего.

Если не указывать разделитель, по умолчанию используется запятая.

Разделитель по умолчанию:

const names = ['John', 'Elly', 'Peter']; const result = names.join(); console.log(result); // "John,Elly,Peter"

Пустой разделитель (элементы сливаются в одну строку):

const names = ['John', 'Elly', 'Peter']; const result = names.join(''); console.log(result); // "JohnEllyPeter"

Произвольный разделитель, например дефис:

const names = ['John', 'Elly', 'Peter']; const result = names.join('-'); console.log(result); // "John-Elly-Peter"

Работа с разными типами данных. join() автоматически преобразует все элементы массива в строки. Это касается и чисел, логических значений, null, undefined:

const mixArray = [1, 'hello', true, null, undefined]; const result = mixArray.join('-'); console.log(result); // "1-hello-true--"

null и undefined становятся пустыми строками.

Пустой массив. Если применить join() к пустому массиву, результатом будет пустая строка:

const empty = []; console.log(empty.join()); // ""

Вот несколько типичных сценариев:

Создание CSV-строк. Можно быстро преобразовать массив данных в строку формата CSV. Её можно использовать для экспорта в Excel или загрузки в базу данных.

let userData = ["Дмитрий", 35, "Санкт-Петербург", "dmitry@mail.com"]; let csvString = userData.join(","); console.log(csvString); // Вывод: "Дмитрий,35,Санкт-Петербург,dmitry@mail.com"

Формирование пути к файлу. Предположим, у нас есть массив, содержащий части пути к файлу. join() помогает собрать из его элементов полный путь.

const pathParts = ["home", "user", "projects", "website", "index.html"]; const fullPath = pathParts.join("/"); console.log("Полный путь к файлу:", fullPath); // Полный путь к файлу: home/user/projects/website/index.html

Сборка URL-адресов. Можно создать URL, объединив его части (например, домен, путь, параметры) из массива.

const urlParts = ["https://example.com", "api", "users", "123", "profile"]; const fullUrl = urlParts.join("/"); console.log("Полный URL:", fullUrl); // Полный URL: https://example.com/api/users/123/profile

При копировании текста с веб‑страниц или чтении данных из файлов часто появляются лишние пробелы в начале и конце текста. Такие пробелы могут мешать при сравнении строк, записи в базу данных или выводе на экран.

Метод trim() удаляет все пробельные символы в начале и конце, включая пробелы, табуляции (\t) и переносы (\n):

let str = " Строка с пробелами \n"; let cleanStr = str.trim(); console.log("До обработки: [" + str + "]"); console.log("После обработки: [" + cleanStr + "]");

Результат:

До обработки: [ Строка с пробелами ] После обработки: [Строка с пробелами]

Этот метод особенно полезен, когда нужно почистить данные перед обработкой.

В JavaScript заглавные и строчные буквы — это разные символы. Поэтому при поиске, сравнении или приведении данных к единому виду часто нужно преобразовать текст в один регистр.

Для этого используют два метода:

  • toUpperCase() — переводит все буквы в верхний регистр (заглавные или большие).
  • toLowerCase() — переводит все буквы в нижний регистр (строчные или маленькие).

Эти методы особенно полезны при поиске слов, сравнении строк, валидации пользовательских данных и стандартизации ввода.

Приведём буквы в имени пользователя к одному формату:

let username = "ваНя"; let stUsername = username.toUpperCase(); console.log("Имя пользователя:", stUsername); // Имя пользователя: ВАНЯ

Сравним email-адреса без учёта регистра:

// Создаём две строки с электронными адресами // Они различаются только регистром букв (в первом адресе есть заглавные) let email1 = "Example@Mail.Com"; let email2 = "example@mail.com"; // Приводим оба адреса к нижнему регистру с помощью toLowerCase() // Теперь оба адреса выглядят одинаково: "example@mail.com" if (email1.toLowerCase() === email2.toLowerCase()) { // Если строки равны после приведения к нижнему регистру, // выводим сообщение о совпадении адресов console.log("Электронные адреса совпадают!"); } else { // Если строки не равны, выводим сообщение о различии console.log("Адреса разные!"); } // Вывод в консоль: // Электронные адреса совпадают!

Метод includes() в JavaScript проверяет, содержится ли одна строка внутри другой. Он возвращает true, если подстрока найдена, и false, если нет.

Допустим, у нас есть список пользователей, и мы хотим узнать, есть ли в списке имя "Алексей":

// Создаём строку с перечнем имён пользователей, разделённых запятыми let users = "Алексей, Мария, Дмитрий, Екатерина"; // Создаём переменную с именем пользователя, которого нужно найти let name = "Алексей"; // Проверяем, содержит ли строка users подстроку name // Метод includes() возвращает true, если подстрока найдена, и false — если нет if (users.includes(name)) { // Если имя найдено в строке, выводим сообщение о том, что пользователь найден console.log("Пользователь найден!"); } else { // Если имя не найдено, выводим сообщение о том, что пользователь не найден console.log("Пользователь не найден!"); } // Вывод в консоль: // Пользователь найден!

Метод чувствителен к регистру. Если отличаются буквы — заглавные или строчные — метод вернёт false:

console.log("Алексей".includes("алексей")); // false

Чтобы избежать ошибок, лучше приводить текст к одному регистру с помощью методов toUpperCase() или toLowerCase():

users.toLowerCase().includes(name.toLowerCase());

Совпадение может быть неполным. Метод вернёт true, даже если подстрока входит в состав другого слова:

console.log("Привет, Алексей".includes("Алекс")); // true

Если нужно искать точные совпадения (например, только имя целиком), лучше сначала разбить строку на части с помощью split() и сравнивать элементы массива.

Метод работает не везде. Метод includes() не работает в старых браузерах, например в Internet Explorer. Если важно поддерживать такие браузеры, можно использовать метод indexOf() как альтернативу. О нём мы поговорим в следующем разделе.

Метод indexOf() позволяет найти позицию подстроки внутри строки. Он возвращает индекс первого символа, с которого начинается подстрока, или -1, если подстрока не найдена.

Допустим, у нас есть сообщение от пользователя. Мы хотим узнать, содержится ли в нём слово "ошибка" и если да, то на какой позиции:

// Создаём строку с сообщением об ошибке let message = "Загрузка данных. Ошибка 404: файл не найден."; // Определяем слово, которое нужно найти в строке let word = "ошибка"; // Приводим строку message к нижнему регистру, чтобы поиск был нечувствителен к регистру // Затем вызываем метод indexOf(), чтобы найти позицию первого вхождения слова «ошибка» let position = message.toLowerCase().indexOf(word); // Проверяем результат работы indexOf() // Если слово найдено, indexOf() вернёт индекс (число >= 0) if (position !== -1) { // Выводим сообщение с позицией найденного слова console.log(`Слово «${word}» найдено на позиции ${position}.`); } else { // Если слово не найдено (indexOf() вернул -1), выводим соответствующее сообщение console.log(`Слово «${word}» не найдено.`); } // Результат: // Слово «ошибка» найдено на позиции 17.

Метод чувствителен к регистру. Как и includes(), indexOf() считает, что заглавные и строчные буквы — это разные символы, так что здесь тоже надо привести текст к одному регистру.

Учитывается только первое совпадение. Если подстрока встречается несколько раз, indexOf() вернёт позицию только первого вхождения, а дальше искать не будет.

Допустим, у вас есть шаблон письма:

"Здравствуйте, {username}! Добро пожаловать на наш сайт."

Имя пользователя будет подставляться позже, когда он введёт свои данные.

Чтобы заменить заглушку {username} на конкретное имя, используется метод replace() — он заменяет первое вхождение одной подстроки на другую.

Синтаксис replace():

str.replace(substr, newSubstr);

Где

  • str — исходная строка;
  • substr — часть, которую нужно заменить;
  • newSubstr — подстрока, на которую меняется исходная.

Заменим имя в шаблоне письма:

let template = "Здравствуйте, USER_NAME! Добро пожаловать на наш сайт."; let userName = "Алексей"; let message = template.replace("USER_NAME", userName); console.log(message); // Здравствуйте, Алексей! Добро пожаловать на наш сайт.

Метод replace() нашёл в шаблоне подстроку {USER_NAME} и заменил её на значение переменной userName.

Метод replace() заменяет только первое совпадение. Чтобы заменить все, используйте метод replaceAll():

let message = "Дорогой USER_NAME, поздравляем с праздником! Желаем успехов, USER_NAME!"; let updated = message.replaceAll("USER_NAME", "Дмитрий"); console.log(updated); // Дорогой Дмитрий, поздравляем с праздником! Желаем успехов, Дмитрий!

Метод replaceAll() не поддерживается в старых браузерах вроде Internet Explorer.

Разберём несколько задач, связанных с работой со строками и массивами в JavaScript.

Дан текст:

"This lesson is boring"

Замените слово "boring" на "interesting".

Решение:

const text = "This lesson is boring"; const newText = text.replace("boring", "interesting"); console.log(newText); // "This lesson is interesting"

Объяснение:

Метод replace("boring", "interesting") заменяет первое вхождение слова "boring" на "interesting".

Дан текст:

"JavaScript is a scripting or programming language"

Разбейте его на массив из отдельных слов.

Решение:

const phrase = "JavaScript is a scripting or programming language"; const words = phrase.split(" "); console.log(words); // ['JavaScript', 'is', 'a', 'scripting', 'or', 'programming', 'language']

Объяснение:

Метод split(" ") разбивает строку на массив, используя пробел как разделитель.

Дан массив:

['JavaScript', 'is', 'a', 'scripting', 'or', 'programming', 'language']

Нужно собрать его в одну строку, разделяя слова пробелами.

Решение:

const words = ['JavaScript', 'is', 'a', 'scripting', 'or', 'programming', 'language']; const phrase = words.join(" "); console.log(phrase); // "JavaScript is a scripting or programming language"

Объяснение:

Метод join(" ") объединяет элементы массива в строку, вставляя пробелы между ними.

Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше