JavaScript Strings | W3Docs JavaScript Tutorial

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

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

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

Function	Description
`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

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

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

Строки в javascript

javascript— editable

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

Строки в javascript

javascript— editable

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

строки в javascript

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

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

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

строки в javascript

func `string`

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

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

Можно создавать многострочные строки с двойными и одинарными кавычками с помощью <kbd class="highlighted">\n</kbd>, вот так:

Строки в javascript

javascript— editable

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

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

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

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

Unicode strings in javascript

javascript— editable

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

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

Вот пример:

Строки в javascript

javascript— editable

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

Строки в javascript

javascript— editable

Длина строки

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

Strings length in javascript

javascript— editable

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

Иногда разработчики ошибочно пишут это свойство как <kbd class="highlighted">str.length()</kbd> вместо <kbd class="highlighted">str.length</kbd>. Это не сработает.

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

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

Character at a position strings in javascript

javascript— editable

Современные разработчики предпочитают использовать квадратные скобки, тогда как <kbd class="highlighted">charAt</kbd> используется редко

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

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

Change character at a position strings in javascript

javascript— editable

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

Character at a position strings in javascript

javascript— editable

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

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

toUpperCase change strings in javascript

javascript— editable

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

toLowerCase change strings in javascript

javascript— editable

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

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

str.indexOf

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

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

Index strings in javascript

javascript— editable

str.lastIndexOf(substr, position)

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

Рассмотрим небольшую сложность с <kbd class="highlighted">indexOf</kbd> внутри проверки if. Его нельзя использовать в <kbd class="highlighted">if</kbd> вот так:

Index strings in javascript

javascript— editable

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

Index strings in javascript

javascript— editable

Includes, startsWith, endsWith

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

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

Includes strings in javascript

javascript— editable

Второй аргумент <kbd class="highlighted">str.includes</kbd> — это позиция, с которой начинается поиск. Вот пример:

Includes strings in javascript

javascript— editable

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

JavaScript включает три метода получения подстроки: <kbd class="highlighted">substring</kbd>, <kbd class="highlighted">substr</kbd> и <kbd class="highlighted">slice</kbd>.

str.slice(start [, end])

Этот метод используется для возврата части строки от <kbd class="highlighted">start</kbd> до <kbd class="highlighted">end</kbd>.

Например:

The slice method in javascript strings

javascript— editable

Если второй аргумент отсутствует, <kbd class="highlighted">slice</kbd> будет идти до конца, как здесь:

Slice in javascript strings

javascript— editable

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

Например:

The slice in javascript strings

javascript— editable

str.substring(start [, end])

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

Он очень похож на <kbd class="highlighted">slice</kbd>. Самое заметное отличие состоит в том, что в рамках этого метода start может быть больше end.

Например:

The substring in javascript strings

javascript— editable

str.substr(start [, length])

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

Например:

The substr in javascript strings

javascript— editable

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

The substr in javascript strings

javascript— editable

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

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

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

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

Comparison in javascript strings

javascript— editable

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

Comparison in javascript strings

javascript— editable

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

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

str.codePointAt(pos)

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

Return the code for the character at position javascript string

javascript— editable

String.fromCodePoint(code)

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

Character's numeric code javascript string

javascript— editable

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

Например:

Unicode characters javascript string

javascript— editable

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

Unicode characters javascript string

javascript— editable

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

Практика

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

Strings are considered as primitive data type in JavaScript.
The 'length' property of JavaScript strings is used to find out the number of characters.
The 'indexOf()' method is used to return the Unicode value of the character at a specified index.
The 'charAt()' method cannot return an empty string.
The 'slice()' method extracts a section of a string and returns it as a new string.
The 'toUpperCase()' method converts the entire string to uppercase letters.
In JavaScript, we cannot concatenate strings using '+'.