Rivalry2

HTML Diff

2 added 2 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>22 июл 2025</li>

3 <li>0</li>

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

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

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

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

8 Содержание

9 <ul><li><a>Что такое строка</a></li>

10 <li><a>Виды строк в JavaScript</a></li>

11 <li><a>Основные свойства строк</a></li>

12 <li><a>Как склеивать строки</a></li>

13 <li><a>Методы split() и join() для разбиения и объединения строк</a></li>

14 <li><a>trim() - убрать пробелы по краям</a></li>

15 <li><a>toUpperCase() / toLowerCase() - изменить регистр</a></li>

16 <li><a>includes() - проверить, есть ли подстрока</a></li>

17 <li><a>indexOf() - найти, где начинается подстрока</a></li>

18 <li><a>replace() и replaceAll() - заменить часть строки</a></li>

19 <li><a>Мини-практика</a></li>

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

21 <ul><li>буквы и цифры;</li>

22 <li>пробелы и знаки препинания;</li>

23 <li>специальные символы вроде \n (перенос строки) и \t (табуляция);</li>

24 <li>любые символы из Unicode, включая эмодзи.</li>

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

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

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

28 let empty = ""; // Пустая строка let str = "Это строка с \"кавычками\" и \\обратным слешем\\."; let ascii = "Hello, World!"; // Только ASCII-символыВ строках можно хранить не только обычный текст, но и код, например HTML или JSON:

29 let html = "<div class='container'>Это контейнер</div>"; let json = '{"name": "John", "age": 30}';Есть два способа записи строк: простые однострочные и многострочные шаблонные. Вид строки выбирают в зависимости от задачи: где-то важно встроить переменную, где-то - сохранить форматирование или удобочитаемость.

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

31 let single = 'Это простая строка'; let double = "Это тоже простая строка"; let escaped = "Он сказал: \"Да!\"";В простых строках перенос нельзя записать напрямую - для этого нужно использовать специальный символ \n. Он указывает на то, что в этом месте текст должен перейти на новую строку при выводе или обработке.

32 let withNewline = "Первая строка\nВторая строка";Это ещё один способ создания строк. Шаблонные строки заключаются в обратные кавычки (`...`).

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

34 let name = "Анна"; let greeting = `Привет, ${name}!`; console.log(greeting); // Привет, Анна!Автоматическое преобразование типов.Когда в шаблонной строке внутри конструкции ${...} используется переменная или выражение, которое не является строкой (например, число, булево значение или объект), JavaScript автоматически преобразует это значение в строку с помощью метода toString(), чтобы его можно было вставить в текст.

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

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

37 let text = `Он сказал: "Это 'пример' текста"`; let escaped = `Экранированная обратная кавычка: \``;В обычных строках перенос строки нельзя сделать напрямую. Для этого приходится писать \n. С шаблонными строками переносы можно добавлять прямо в коде - нажатием Enter.

38 let message = `Это многострочная строка в JavaScript.`; console.log(message);Результат:

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

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

41 - let newText = text.replace("П", "п"); console.log(newText); // "привет"Такое свойство делает работу безопаснее - что бы функция ни делала со строкой, исходная строка останется нетронутой. К тому же благодаря неизменяемости одну и ту же строку можно использовать в разных местах программы.

41 + let newText = text.replace("П", "п"); console.log(newText); // "привет"Такое свойство делает работу бе��опаснее - что бы функция ни делала со строкой, исходная строка останется нетронутой. К тому же благодаря неизменяемости одну и ту же строку можно использовать в разных местах программы.

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

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

44 let str = "JavaScript"; console.log(str[0]); // "J" - первый символ console.log(str[4]); // "S" - пятый символ console.log(str[9]); // "t" - последний символЭто свойство полезно при проверке формата данных, например первой буквы в имени и в задачах на обработку текста: при переворачивании строки, поиске определённых символов и тому подобном.

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

46 let message = "Hello, world!"; console.log(message.length); // 13Свойство length доступно только для чтения, и ему нельзя присвоить новое значение:

47 let word = "Привет!"; word.length = 4; console.log(word); // "Привет!" console.log(word.length); // 7Если строка пустая, length равен 0.

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

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

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

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

52 let firstName = "Анна"; let lastName = "Иванова"; let fullName = firstName + " " + lastName; console.log(fullName); // "Анна Иванова"Здесь между именем и фамилией мы добавили пробел, указав его как отдельную строку " ".

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

54 let itemCount = 5; let message = "Количество смартфонов: " + itemCount; console.log(message); // "Количество смартфонов: 5"Чтобы добавить текст в конец другой строки, можно использовать оператор += (присваивание с конкатенацией):

55 let orderInfo = "Заказ содержит "; orderInfo += 10; orderInfo += " товаров"; console.log(orderInfo); // "Заказ содержит 10 товаров"Шаблонные строки.Мы уже говорили об этом способе раньше. Шаблонные строки удобнее, если текст большой или содержит много переменных. Они делают код более читаемым и избавляют от лишних плюсов.

56 let name = "Анна"; let age = 25; let message = `Привет, ${name}! Тебе уже ${age} лет.`; console.log(message); // "Привет, Анна! Тебе уже 25 лет."Иногда нужно изменить строку: удалить или заменить её части, добавить новые элементы. Прямо со строкой это сделать нельзя, потому что этот тип данных неизменяем. Поэтому сначала текст превращают в массив. После того как все изменения внесены, массив снова собирают в строку.

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

58 <ul><li>split() - преобразует строку в массив.</li>

59 <li>join() - преобразует массив в строку.</li>

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

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

62 <ul><li>separator - символ или подстрока, по которой нужно делить строку;</li>

63 <li>limit (необязательный параметр) - максимальное количество элементов в массиве.</li>

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

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

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

67 let csvData = "Анна,25,Екатеринбург,example@gmail.com";Нам нужно вывести данные в таком виде:

68 Имя: Анна Возраст: 25 Город: Екатеринбург e-mail: example@gmail.comИспользуем метод split() и превратим строку csvData в массив:

69 let result = csvData.split(","); console.log(result); // ["Анна", "25", "Екатеринбург", "example@gmail.com"]Метод split() делит строку на части по запятой и преобразует их в элементы массива result .

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

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

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

73 let input = "item1 item2 item3 item4";Здесь элементы разделены пробелами. Чтобы превратить текст в массив, используем метод split(" ") с пробелом в качестве разделителя:

74 let result = input.split(" "); console.log(result); // ["item1", "item2", "item3", "item4"]В результате получаем массив:

75 ["item1", "item2", "item3", "item4"]Допустим, строка разделена точками с запятой:

76 - let input = "part1;part2;part3;part4";Нам нужно получить только первые три элемента. В эт��м случае можно использовать метод split(";", 3):

76 + let input = "part1;part2;part3;part4";Нам нужно получить только первые три элемента. В этом случае можно использовать метод split(";", 3):

77 let result = input.split(";", 3); console.log(result); // ["part1", "part2", "part3"]Здесь текст разбивается максимум на три части, а остальное отбрасывается.

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

79 let str = ",a,b,c,"; let result = str.split(","); console.log(result); // ["", "a", "b", "c", ""]Разделение на символы.Если передать в split() пустую строку ("") в качестве разделителя, то каждая буква станет отдельным элементом массива:

80 let str = "JavaScript"; let result = str.split(""); console.log(result); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]Без аргумента.Если вызвать split() без параметров, строка не разделяется:

81 let str = "JavaScript"; let result = str.split(); console.log(result); // ["JavaScript"]Метод join() используется для объединения всех элементов массива в одну строку. Он имеет один необязательный аргумент - разделитель, который вставляется между элементами.

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

83 array.join(separator)<ul><li>array - массив, элементы которого нужно объединить.</li>

84 <li>separator - строка, вставляемая между элементами. Это может быть символ, слово, фраза, пустая строка или вообще ничего.</li>

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

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

87 const names = ['John', 'Elly', 'Peter']; const result = names.join(); console.log(result); // "John,Elly,Peter"Пустой разделитель (элементы сливаются в одну строку):

88 const names = ['John', 'Elly', 'Peter']; const result = names.join(''); console.log(result); // "JohnEllyPeter"Произвольный разделитель, например дефис:

89 const names = ['John', 'Elly', 'Peter']; const result = names.join('-'); console.log(result); // "John-Elly-Peter"Работа с разными типами данных.join() автоматически преобразует все элементы массива в строки. Это касается и чисел, логических значений, null, undefined:

90 const mixArray = [1, 'hello', true, null, undefined]; const result = mixArray.join('-'); console.log(result); // "1-hello-true--"null и undefined становятся пустыми строками.

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

92 const empty = []; console.log(empty.join()); // ""Вот несколько типичных сценариев:

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

94 let userData = ["Дмитрий", 35, "Санкт-Петербург", "dmitry@mail.com"]; let csvString = userData.join(","); console.log(csvString); // Вывод: "Дмитрий,35,Санкт-Петербург,dmitry@mail.com"Формирование пути к файлу.Предположим, у нас есть массив, содержащий части пути к файлу. join() помогает собрать из его элементов полный путь.

95 const pathParts = ["home", "user", "projects", "website", "index.html"]; const fullPath = pathParts.join("/"); console.log("Полный путь к файлу:", fullPath); // Полный путь к файлу: home/user/projects/website/index.htmlСборка URL-адресов.Можно создать URL, объединив его части (например, домен, путь, параметры) из массива.

96 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При копировании текста с веб‑страниц или чтении данных из файлов часто появляются лишние пробелы в начале и конце текста. Такие пробелы могут мешать при сравнении строк, записи в базу данных или выводе на экран.

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

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

99 До обработки: [ Строка с пробелами ] После обработки: [Строка с пробелами]Этот метод особенно полезен, когда нужно почистить данные перед обработкой.

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

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

102 <ul><li>toUpperCase() - переводит все буквы в верхний регистр (заглавные или большие).</li>

103 <li>toLowerCase() - переводит все буквы в нижний регистр (строчные или маленькие).</li>

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

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

106 let username = "ваНя"; let stUsername = username.toUpperCase(); console.log("Имя пользователя:", stUsername); // Имя пользователя: ВАНЯСравним email-адреса без учёта регистра:

107 // Создаём две строки с электронными адресами // Они различаются только регистром букв (в первом адресе есть заглавные) 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, если нет.

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

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

110 console.log("Алексей".includes("алексей")); // falseЧтобы избежать ошибок, лучше приводить текст к одному регистру с помощью методов toUpperCase() или toLowerCase():

111 users.toLowerCase().includes(name.toLowerCase());Совпадение может быть неполным.Метод вернёт true, даже если подстрока входит в состав другого слова:

112 console.log("Привет, Алексей".includes("Алекс")); // trueЕсли нужно искать точные совпадения (например, только имя целиком), лучше сначала разбить строку на части с помощью split() и сравнивать элементы массива.

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

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

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

116 // Создаём строку с сообщением об ошибке 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() считает, что заглавные и строчные буквы - это разные символы, так что здесь тоже надо привести текст к одному регистру.

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

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

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

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

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

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

123 str.replace(substr, newSubstr);Где

124 <ul><li>str - исходная строка;</li>

125 <li>substr - часть, которую нужно заменить;</li>

126 <li>newSubstr - подстрока, на которую меняется исходная.</li>

127 </ul>Заменим имя в шаблоне письма:

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

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

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

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

132 Дан текст:

133 "This lesson is boring"

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

135 Решение:

136 const text = "This lesson is boring"; const newText = text.replace("boring", "interesting"); console.log(newText); // "This lesson is interesting"Объяснение:

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

138 Дан текст:

139 "JavaScript is a scripting or programming language"

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

141 Решение:

142 const phrase = "JavaScript is a scripting or programming language"; const words = phrase.split(" "); console.log(words); // ['JavaScript', 'is', 'a', 'scripting', 'or', 'programming', 'language']Объяснение:

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

144 Дан массив:

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

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

147 Решение:

148 const words = ['JavaScript', 'is', 'a', 'scripting', 'or', 'programming', 'language']; const phrase = words.join(" "); console.log(phrase); // "JavaScript is a scripting or programming language"Объяснение:

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

150 <ul><li><a>MDN: объект String</a></li>

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