Строки в JavaScript

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

Содержание

• Что такое строка
• Виды строк в JavaScript
• Основные свойства строк
• Как склеивать строки
• Методы split() и join() для разбиения и объединения строк
• trim() — убрать пробелы по краям
• toUpperCase() / toLowerCase() — изменить регистр
• includes() — проверить, есть ли подстрока
• indexOf() — найти, где начинается подстрока
• replace() и replaceAll() — заменить часть строки
• Мини-практика

Что такое строка

В 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}';

Читайте также:

Как запустить JavaScript-код: в браузере, консоли и редакторе кода

Виды строк в JavaScript

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

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

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

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

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

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

Шаблонные строки (template literals)

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

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

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() — преобразует строку в массив.
• join() — преобразует массив в строку.

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

Читайте также:

Методы массивов в JavaScript: объясняем на пальцах для новичков

Метод split()

Метод 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()

Пустые строки в массиве. Если разделитель стоит в начале или в конце текста, 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()

Метод 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"

Читайте также:

Чем различаются var, let и const в JavaScript

Особенности метода join()

Работа с разными типами данных. 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()); // ""

В каких задачах полезен метод 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() — убрать пробелы по краям

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

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

let str = "   Строка с пробелами  \n";
let cleanStr = str.trim();

console.log("До обработки: [" + str + "]");
console.log("После обработки: [" + cleanStr + "]");

Результат:

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

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

toUpperCase() / toLowerCase() — изменить регистр

В 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() — проверить, есть ли подстрока

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

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

// Создаём строку с перечнем имён пользователей, разделённых запятыми
let users = "Алексей, Мария, Дмитрий, Екатерина";

// Создаём переменную с именем пользователя, которого нужно найти
let name = "Алексей";

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

// Вывод в консоль:
// Пользователь найден!

Особенности метода includes()

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

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

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

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

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

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

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

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

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.

Особенности метода indexOf()

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

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

replace() и replaceAll() — заменить часть строки

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

"Здравствуйте, {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.

Задача 1: заменить слово в строке

Дан текст:

"This lesson is boring"

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

Задача 2: разбить фразу в массив по словам

Дан текст:

"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']

Задача 3: собрать массив слов в строку

Дан массив:

['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"

Полезные ссылки

• MDN: объект String