Строки в JavaScript

В JavaScript строки используются для хранения и обработки текста. В отличие от некоторых других языков, в JavaScript нет отдельного типа для одиночного символа — символ — это просто строка длиной 1. Внутренний формат каждой строки всегда UTF-16, поэтому каждый символ соответствует числовому коду (подробнее об этом ниже).

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

На этой странице вы узнаете, как создавать строки (с одинарными, двойными кавычками и обратными кавычками), использовать специальные символы, читать длину строки, обращаться к отдельным символам, извлекать подстроки, менять регистр, выполнять поиск внутри строки и корректно сравнивать строки.

Популярные функции для работы со строками

О кавычках

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

let single = 'single-quoted';
let double = "double-quoted";
let backticks = `backticks`;

Одинарные и двойные кавычки ведут себя одинаково — выберите один стиль и придерживайтесь его. Обратные кавычки отличаются: они поддерживают шаблонные литералы, позволяя встраивать любое выражение непосредственно в строку, обернув его в ${…}:

Выражение внутри ${…} может быть чем угодно — переменной, вычислением или вызовом функции:

Ещё одно важное преимущество обратных кавычек — они позволяют строке занимать несколько строк:

Одинарные и двойные кавычки сами по себе не могут охватывать несколько строк. Вставка обычного переноса строки внутри них является синтаксической ошибкой:

let guestList = "Guests: // SyntaxError: Invalid or unexpected token
* John ";

Одинарные и двойные кавычки появились раньше обратных, поэтому обратные кавычки — более мощный и современный вариант.

Также перед первой обратной кавычкой можно поместить «функцию-тег» (тегированный шаблон):

func`string`;

Функция func вызывается автоматически и получает буквальные части строки вместе со встроенными выражениями, что позволяет обрабатывать их. Так библиотеки реализуют пользовательские шаблоны, однако в повседневном коде это применяется редко.

Специальные символы

Вы можете создать многострочный вывод из строк с одинарными или двойными кавычками с помощью \n (символа новой строки):

Существуют и другие, менее распространённые специальные символы.

Некоторые из них приведены в списке ниже:

• \', \" — эти специальные символы используются для кавычек
• \r — возврат каретки. Этот символ сейчас используется отдельно редко. Комбинация двух символов \r\n применяется для обозначения переноса строки в текстовых файлах Windows.
• \\ — обратная косая черта
• \t — табуляция
• \xXX — символ Unicode с конкретным шестнадцатеричным кодом XX
• \uXXXX — символ Unicode с шестнадцатеричным кодом XXXX в кодировке UTF-16. Должен содержать ровно 4 цифры.

Вот примеры с экранированием Unicode:

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

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

Длина строки

Свойство length возвращает количество символов в строке:

Обратите внимание, что \n — это один специальный символ, поэтому длина равна 7 (W3Docs плюс один символ новой строки), а не 8.

Распространённая ошибка — вызов str.length() вместо обращения к str.length. length — это свойство, а не метод: добавление () вызывает ошибку «not a function».

Доступ к символам

Квадратные скобки [pos] — обычный способ получить символ по заданной позиции. Также можно вызвать метод str.charAt(pos). Позиции отсчитываются с нуля, поэтому первый символ находится по индексу 0:

Одно отличие: если символа по указанной позиции не существует, str[pos] возвращает undefined, тогда как str.charAt(pos) возвращает пустую строку ''. В современном коде обычно предпочитают квадратные скобки; charAt сегодня используется редко.

Неизменяемость строк

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

Вместо этого создайте совершенно новую строку и присвойте её переменной:

Изменение регистра

Два метода изменяют регистр всей строки — toUpperCase() и toLowerCase():

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

Поиск подстроки

Существует несколько способов найти подстроку внутри строки.

str.indexOf

str.indexOf(substr, pos) ищет substr внутри str, опционально начиная с позиции pos. Возвращает индекс первого совпадения или -1, если совпадение не найдено:

str.lastIndexOf

str.lastIndexOf(substr, pos) работает как indexOf, но выполняет поиск с конца строки к началу, возвращая индекс последнего совпадения.

Частая ошибка — использование indexOf непосредственно в условии if. Поскольку совпадение на позиции 0 является ложным значением, следующий код выглядит правильным, но работает неверно:

Всегда сравнивайте результат с -1:

includes, startsWith, endsWith

Более современный str.includes(substr, pos) возвращает true или false в зависимости от того, содержит ли str подстроку substr. Используйте его, когда вам нужно знать лишь наличие совпадения, а не его позицию:

Необязательный второй аргумент — позиция, с которой начинается поиск:

str.startsWith(substr) и str.endsWith(substr) тесно связаны с ним — они проверяют начало и конец строки:

Извлечение подстроки

В JavaScript есть три метода для получения подстроки: slice, substring и substr. В современном коде рекомендуется использовать slice — он наиболее гибкий, а substr считается устаревшим.

str.slice(start, end)

slice возвращает часть строки от start до end (не включая end):

Если второй аргумент опущен, slice продолжает работу до конца строки:

Также можно использовать отрицательные значения, которые отсчитываются с конца:

str.substring(start, end)

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

str.substr(start, length)

substr возвращает часть строки начиная с позиции start заданной length длины. В отличие от остальных, второй аргумент — это длина, а не конечная позиция. Этот метод является устаревшим — в новом коде предпочитайте slice.

Отрицательный start отсчитывается с конца:

Сравнение строк

Операторы <, >, <= и >= сравнивают строки посимвольно, используя Unicode-код каждого символа (общие правила см. в операторах сравнения). Два следствия часто удивляют новичков:

1. Строчная буква «больше» прописной, поскольку строчные буквы имеют более высокие коды:

2. Буквы с диакритическими знаками сортируются «не по порядку» — они находятся за пределами базового диапазона A–Z, поэтому сравниваются как большие:

Поэтому операторы сравнения подходят для сортировки строго по коду, но не для алфавитного порядка, понятного человеку. Для сравнения с учётом локали используйте str.localeCompare(other), который возвращает отрицательное число, 0 или положительное число:

Символы и их коды

Поскольку строки хранятся в формате UTF-16, каждый символ имеет числовой код. str.codePointAt(pos) возвращает код символа на позиции pos:

String.fromCodePoint(code) выполняет обратную операцию — создаёт символ из числового кода:

Также можно вставить символ по его коду в строковый литерал, используя \u перед шестнадцатеричным кодом:

В качестве более полного примера — строка, построенная из символов с кодами 65..220:

Сначала идут прописные буквы, затем несколько специальных символов, и вывод заканчивается примерно на Ö.

Связанные темы

• Типы данных JavaScript — место строк среди примитивов.
• Методы примитивов — как примитивная строка может иметь методы.
• Числа — смежный примитивный тип.
• Операторы сравнения — полные правила сравнения.
• Методы array — полезны после того, как split() превращает строку в array.

Практика