Методы строк в JavaScript: простая шпаргалка с примерами

Любые текстовые данные в JavaScript считаются строками. Это примитивный тип, но язык позволяет работать с ним так, будто он является объектом. В том числе — использовать встроенные в JS методы строк, которые собраны в этой шпаргалке.

Важно: при использовании методов создаётся новая строка, которая записывается в ту же переменную вместо старой строки.

Как изменить регистр

toLowerCase

Преобразует символы в строке в нижний регистр.

			"Hello Tproger".toLowerCase(); // "hello tproger"
		

toUpperCase

Преобразует символы в строке в верхний регистр.

			"Hello Tproger".toUpperCase(); // "HELLO TPROGER"
		

Как объединить строки

concat

Объединяет две или более строки и возвращает одну строку.

			"Hello".concat(" Tproger"); // "Hello Tproger"
"Hello".concat(" T", "p", "r", "o", "g", "e", "r"); // "Hello Tproger"
		

Как разделить строку на подстроки

split

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

			// Получаем каждый символ
"Hello Tproger".split(""); // ["H", "e", "l", "l", "o", " ", "T", "p", "r", "o", "g", "e", "r"]

// Получаем каждое слово из строки
"Hello Tproger".split(" "); //["Hello", "Tproger"]

// Устанавливаем ограничитель
"Hello Tproger".split(" ", 1); //["Hello"]
		

Как повторить строку

repeat

Принимает в качестве параметра число и повторяет строку указанное количество раз.

			"Tproger ".repeat(3); // "Tproger Tproger Tproger "
		

Как найти подстроку

charAt

Возвращает символ по указанному индексу.

			"Hello Tproger".charAt(); // "H"
		

includes

Проверяет, содержит ли строка указанную подстроку. Возвращает значение true или false. Вторым параметром можно указать позицию в строке, с которой следует начать поиск.

			"Hello Tproger".includes("Tproger"); // true
"Hello Tproger".includes("Hello", 1); // false
		

indexOf

Возвращает индекс первого найденного вхождения указанного значения. Поиск ведётся от начала до конца строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.

			"Hello World".indexOf("o"); // 4
"Hello World".indexOf("o", 5); // 7
		

lastIndexOf

Возвращает индекс последнего найденного вхождения указанного значения. Поиск ведётся от конца к началу строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.

			"Hello World".lastIndexOf("o"); // 7
"Hello World".lastIndexOf("o", 5); // 4
		

endsWith

Проверяет, заканчивается ли строка символами, заданными первым параметром. Возвращает true или false. Есть второй необязательный параметр — ограничитель по диапазону поиска. По умолчанию он равен длине строки.

			"Hello Tproger".endsWith("Tproger"); // true
"Hello Tproger".endsWith("Tproger", 12); // false
		

startsWith

Проверяет, начинается ли строка с указанных символов. Возвращает true или false. Вторым параметром можно указать индекс, с которого следует начать проверку.

			"Hello Tproger".startsWith("Hello"); // true
"Hello Tproger".startsWith("Hello", 1); // false
		

search

Проверяет, есть ли в строке указанное значение или регулярное выражение и возвращает индекс начала совпадения.

			"hi, hello, hey".search("hello"); // 4
		

Как извлечь подстроку

slice

Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).

			"Методы строк на Tproger".slice(16); // "Tproger"
"Методы строк на Tproger".slice(16, 21); // "Tprog"

// Отрицательные значения тоже работают
"Методы строк на Tproger".slice(-7); // "Tproger"
"Методы строк на Tproger".slice(-7, -2); // "Tprog"
		

substring

Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.

			"Методы строк на Tproger".substring(5, 2); // "тод"
		

substr

Извлекает часть строки указанной длины. Первым параметром принимает стартовую позицию, вторым — длину. Значение первого параметра может быть отрицательным, тогда позиция определяется с конца строки.

			"Методы строк на Tproger".substr(7, 5); // "строк"
"Методы строк на Tproger".substr(-7, 5); // "Tprog"
		

Как заменить подстроку

replace

Ищет в строке указанное значение или регулярное выражение и возвращает новую строку, в которой выполнена замена на второй параметр. Можно заменить найденные значения другой строкой или передать функцию для работы над совпадениями.

			"hi, hello, hi".replace("hi", "hey"); // "hey, hello, hi"
"hi, hello, hi".replace(/hi/g, "hey"); // "hey, hello, hey"
		

replaceAll

Даёт такой же результат, как метод replace() с глобальным флагом g. Заменяет все найденные совпадения другой строкой или переданной функцией.

			"hi, hello, hi".replaceAll("hi", "hey"); // "hey, hello, hey"
		

Как добавить в строку пробелы или другие символы

padEnd

Добавляет в конце отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.

			"Hello Tproger".padEnd(20, "*"); // "Hello Tproger*******"
		

padStart

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

			"Hello Tproger".padStart(20, "*"); // "*******Hello Tproger"
		

Как удалить пробелы в строке

trim

Обрезает пробелы с обоих концов строки.

			"   Hello Tproger ".trim(); // "Hello Tproger"
		

trimEnd

Обрезает пробелы в конце строки

			"   Hello Tproger ".trimEnd(); // "   Hello Tproger"
		

trimStart

Обрезает пробелы в начале строки

			"   Hello Tproger ".trimStart(); // "Hello Tproger "
		

Как работать с Юникодом

charCodeAt

Возвращает числовое значение Юникода по указанному индексу. Обратите внимание: у букв в верхнем и нижнем регистрах разные коды.

			"T".charCodeAt() // 84
"t".charCodeAt() // 116
		

fromCharCode

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

			String.fromCharCode(72, 101, 108, 108, 111); // "Hello"
		

Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.

			'?'.length; // 2, редкий китайский иероглиф
		

Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.

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

При составлении этой шпаргалки я пользовался «Современным учебником JavaScript» Ильи Кантора и документацией MDN.

Больше полезных материалов по JS:

• Шпаргалка по современному JavaScript
• Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду