Перейти к содержимому

Строки JavaScript

В JavaScript строки используются для хранения и обработки текста. Отдельного типа для одного символа не существует. Внутренний формат строк всегда UTF-16.

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

Популярные строковые функции

FunctionDescription
charAt(index)Возвращает символ по указанному индексу.
charCodeAt(index)Возвращает Unicode-код символа по указанному индексу.
concat(...strings)Соединяет строковые аргументы с вызывающей строкой и возвращает новую строку.
includes(searchString, position)Определяет, содержит ли вызывающая строка searchString.
indexOf(searchValue, fromIndex)Возвращает индекс первого вхождения searchValue в строке, начиная поиск с fromIndex. Возвращает -1, если значение не найдено.
lastIndexOf(searchValue, fromIndex)Возвращает индекс последнего вхождения searchValue в вызывающей строке, выполняя поиск в обратном направлении от fromIndex. Возвращает -1, если значение не найдено.
match(regexp)Получает совпадения при сопоставлении строки с регулярным выражением.
matchAll(regexp)Возвращает итератор всех результатов, совпадающих со строкой по регулярному выражению, включая захватывающие группы.
repeat(count)Возвращает новую строку, состоящую из вызывающей строки, повторённой count раз.
replace(searchFor, replaceWith)Заменяет первое совпадение подстроки или шаблона строкой-заменой.
replaceAll(searchFor, replaceWith)Заменяет все совпадения подстроки или шаблона строкой-заменой.
search(regexp)Ищет в строке совпадение с регулярным выражением и возвращает индекс совпадения.
slice(startIndex, endIndex)Извлекает часть строки и возвращает её как новую строку, не изменяя исходную строку.
split(separator, limit)Разделяет строку на упорядоченный список подстрок, помещает эти подстроки в массив и возвращает массив. Разделение выполняется путём поиска шаблона; шаблон передаётся первым параметром при вызове метода.
startsWith(searchString, position)Определяет, начинается ли вызывающая строка с символов searchString.
substring(startIndex, endIndex)Возвращает часть строки между индексами начала и конца или до конца строки.
toLowerCase()Возвращает значение вызывающей строки, преобразованное в нижний регистр.
toUpperCase()Возвращает значение вызывающей строки, преобразованное в верхний регистр.
trim()Удаляет пробелы с обоих концов строки.
trimStart() or trimLeft()Удаляет пробелы с начала строки.
trimEnd() or trimRight()Удаляет пробелы с конца строки.
valueOf()Возвращает примитивное значение объекта String.

О кавычках

Мы можем различать одинарные кавычки, двойные кавычки и обратные кавычки:

строки в javascript

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

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

Строки в javascript

Output appears here after Run.

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

Строки в javascript

Output appears here after Run.

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

строки в javascript

makefile
let guestList = "Guests: // Error: Unexpected token ILLEGAL 
* John ";

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

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

строки в javascript

makefile
func `string`

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

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

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

Строки в javascript

Output appears here after Run.

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

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

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

Вот примеры с Unicode-символами:

Unicode strings in javascript

Output appears here after Run.

Имейте в виду, что все специальные символы начинаются с обратной косой черты. Это также известно как «символ экранирования».

Его также можно использовать, если вы хотите поместить кавычку в строку.

Вот пример:

Строки в javascript

Output appears here after Run.

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

Строки в javascript

Output appears here after Run.

Длина строки

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

Strings length in javascript

Output appears here after Run.

Имейте в виду, что \n — это специальный символ. Поэтому длина должна быть 7.

Иногда разработчики ошибочно пишут это свойство как str.length() вместо str.length. Это не сработает.

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

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

Character at a position strings in javascript

Output appears here after Run.

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

Строки неизменяемы

Изменить строки в JavaScript невозможно. Посмотрите на этот пример, чтобы убедиться, что это не сработает:

Change character at a position strings in javascript

Output appears here after Run.

Обычная практика — создавать совершенно новую строку и присваивать её str вместо старой, вот так:

Character at a position strings in javascript

Output appears here after Run.

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

Можно выделить два метода изменения регистра. Вот они:

toUpperCase change strings in javascript

Output appears here after Run.

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

toLowerCase change strings in javascript

Output appears here after Run.

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

Давайте рассмотрим способы поиска подстроки внутри строки.

str.indexOf

Это первый метод, который используется для поиска substr в str. Он начинает с определённой позиции pos и возвращает эту позицию, когда совпадение найдено, или -1, если ничего не найдено.

Давайте посмотрим на следующий пример:

Index strings in javascript

Output appears here after Run.

str.lastIndexOf(substr, position)

Этот метод ищет от конца строки к началу. Вхождения будут перечислены в обратном порядке.

Рассмотрим небольшую сложность с indexOf внутри проверки if. Его нельзя использовать в if вот так:

Index strings in javascript

Output appears here after Run.

Поэтому необходимо проверять на -1, как показано ниже:

Index strings in javascript

Output appears here after Run.

Includes, startsWith, endsWith

Более современный метод str.includes(substr, pos) может возвращать true/false в зависимости от того, есть ли substr в str.

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

Includes strings in javascript

Output appears here after Run.

Второй аргумент str.includes — это позиция, с которой начинается поиск. Вот пример:

Includes strings in javascript

Output appears here after Run.

Получение подстроки

JavaScript включает три метода получения подстроки: substring, substr и slice.

str.slice(start [, end])

Этот метод используется для возврата части строки от start до end.

Например:

The slice method in javascript strings

Output appears here after Run.

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

Slice in javascript strings

Output appears here after Run.

Для start/end можно также использовать отрицательные значения.

Например:

The slice in javascript strings

Output appears here after Run.

str.substring(start [, end])

Этот метод используется для возврата части строки между start и end.

Он очень похож на slice. Самое заметное отличие состоит в том, что в рамках этого метода start может быть больше end.

Например:

The substring in javascript strings

Output appears here after Run.

str.substr(start [, length])

Этот метод возвращает часть строки от start с заданной длиной. Он отличается от предыдущих методов. Этот метод помогает указать length вместо конечной позиции.

Например:

The substr in javascript strings

Output appears here after Run.

Первый аргумент может быть отрицательным для отсчёта от конца:

The substr in javascript strings

Output appears here after Run.

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

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

Также стоит учитывать следующие особенности:

  1. Строчные буквы больше заглавных, вот так:

Comparison in javascript strings

Output appears here after Run.
  1. Буквы с диакритическими знаками считаются «не по порядку». Например:

Comparison in javascript strings

Output appears here after Run.

Теперь давайте начнём рассматривать внутреннее представление строк в JavaScript.

В JavaScript мы кодируем все строки с помощью UTF-16. Это означает, что каждый символ имеет соответствующий числовой код.

str.codePointAt(pos)

Используется для возврата кода символа в позиции pos :

Return the code for the character at position javascript string

Output appears here after Run.

String.fromCodePoint(code)

Создаёт символ по числовому коду:

Character's numeric code javascript string

Output appears here after Run.

Unicode-символы также можно добавлять по их кодам, используя \u с последующим шестнадцатеричным кодом.

Например:

Unicode characters javascript string

Output appears here after Run.

Давайте посмотрим на символы с кодами 65..220 и составим из них строку:

Unicode characters javascript string

Output appears here after Run.

Здесь можно заметить, что сначала идут заглавные символы, затем несколько специальных символов, и в конце вывода — Ö.

Практика

What are some characteristics or functions of strings in JavaScript as described in the article?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.