Как настроить скрипт строка

Работа со строками в современном JavaScript

Работа со строками в современном JavaScript

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

Создание строк

По сути, в JavaScript есть две категории строк: строковые примитивы и объекты String.

Примитивы

Строковые примитивы создаются следующими способами:

Почти во всех случаях вы должны использовать один из этих методов для создания новой строки.

При определении строкового литерала можно использовать одинарные кавычки ( ‘ ‘ ) или двойные кавычки ( » « ).

Объекты

Вы можете создать объект String, используя ключевое слово new .

Единственное реальное преимущество объекта перед строковым примитивом состоит в том, что вы можете назначить ему дополнительные свойства:

Однако очень мало случаев, когда это полезно. Практически во всех случаях следует создавать строковый примитив.

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

Когда вы вызываете метод для строкового примитива, JavaScript оборачивает примитив в String-объект и вызывает метод этого объекта.

Шаблонные строки

Базовые шаблонные строки

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

Cube Dev , Удалённо , От 8000 $

Вместо двойных или одинарных кавычек заключите строку в обратные кавычки и вставьте переменные, используя синтаксис $

Вы также можете включать выражения в шаблонные строки:

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

Вы также можете вкладывать шаблоны друг в друга, как показано в этом примере из MDN:

Теговые шаблоны

Теговые шаблоны позволяют создать функцию, которая парсит шаблонную строку.

Это может быть действительно мощным инструментом и наиболее наглядно демонстрируется на примере:

Представьте, что у нас есть функция censor() , которая удаляет любые оскорбительные слова в строке, введенной пользователем.

Когда мы хотим подвергнуть строку цензуре, мы можем вручную вызвать censor() для каждого введенного пользователем значения:

Или мы могли бы использовать теговые шаблоны.

Это позволяет нам написать функцию, которая принимает строковые значения из шаблонной строки и все выражения, используемые в шаблоне:

Обратите внимание, что в последней строке мы «тегаем» строку нашей функцией, добавляя ее перед шаблонной строкой, а не явно вызывая функцию censorStrings() .

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

Первым аргументом теговой функции всегда является массив строк. Остальные аргументы представляют каждую переменную / выражение, используемые в шаблонной строке.

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

В этих случаях полезно поместить каждый из оставшихся аргументов в массив (используя синтаксис «rest»), чтобы вы могли их перебирать:

Теперь у нас есть доступ к шаблонной строке и отдельным аргументам. Мы можем отслеживать каждую переменную, используемую в строке:

Наконец, наша теговая функция должна вернуть обработанную строку.

Для этого мы просто объединяем исходный массив строк и массив (измененных) входных данных в новый массив.

Здесь мы делаем это с помощью .reduce() :

Наша теговая функция теперь готова, и ее можно использовать везде, где нам нужно цензурировать вводимые пользователем данные:

Теговая функция не обязательно должна возвращать строку.

Например, есть библиотеки для React, которые принимают шаблонную строку и возвращают компонент React.

Raw-строки в JavaScript

String.raw — это предопределенная теговая функция.

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

Например, при использовании строки, содержащей \ n с String.raw , вместо получения новой строки вы получите фактические символы \ и n :

Это может быть полезно (помимо прочего) для написания строк, в которых вам обычно приходится избегать большого количества символов обратного слэша, таких как пути к файлам:

При использовании string.raw символ \ экранирует последнюю обратную кавычку.

Это означает, что вы не можете заканчивать raw-строку символом \ следующим образом:

Объединение строк

Конкатенация строк

Вы можете объединить (или «конкатенировать») несколько строк, чтобы создать новую, используя символ + :

Этот подход также можно использовать для разделения создания строки на несколько строк для удобства чтения:

Вы также можете объединять строки с переменными (нестроковые переменные будут преобразованы в строки):

Чтобы создать новую строку, добавив ее в конец существующей, используйте += :

Вы также можете объединить строки и переменные с помощью метода string.concat(), но это не рекомендуется по соображениям производительности.

Вместо этого используйте операторы + или += как показано выше

Повторение строки

Метод repeat() в JavaScript возвращает новую строку, содержащую исходную строку, повторяющуюся несколько раз.

Вы можете использовать string.repeat() в следующих браузерах:

Объединение строк

Вы можете объединить массив строк в одну, используя метод .join() для массива.

По умолчанию элементы разделяются запятой:

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

Передача пустой строки в string.join объединит элементы, между которыми ничего нет:

Когда toString() используется в массиве, он также возвращает список строк, разделенных запятыми.

Разделение строки

Вы можете разделить строку на массив с помощью метода split() .

Типичные варианты использования:

Превращаем предложение в массив слов, разбивая его по пробелам:

… или разделение многострочной строки на отдельные строки:

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

Если вам нужно преобразовать строку в JavaScript в массив символов учитывайте, что метод split() не работает для символов Unicode, которые представлены «суррогатными парами»:

В современных браузерах вместо этого можно использовать spread-оператор:

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

Равенство

Как вы знаете, что сравнивая два строковых примитива, вы можете использовать операторы == или === :

Если вы сравниваете строковый примитив с чем-то, что не является строкой, == и === ведут себя по-разному.

При использовании оператора == не-строка будет преобразована в строку. Это означает, что JavaScript попытается преобразовать его в строку перед сравнением значений.

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

То же самое верно и для операторов неравенства != и !== :

Если вы не знаете, что использовать, отдавайте предпочтение строгому равенству === .

При использовании объектов String два объекта с одинаковым значением не считаются равными строками в JavaScript:

Чувствительность к регистру

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

Однако иногда вам нужно больше контроля над сравнением. Об этом в следующем разделе …

Работа с диакритическими знаками в строках JavaScript

Диакритические знаки — это модификации буквы, например é или ž.

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

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

Если вам нужно сравнение без учета регистра, простое преобразование двух строк в один и тот же регистр с помощью toUpperCase() или toLowerCase() не будет учитывать добавление / удаление акцентов и может не дать ожидаемого результата.

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

Метод localeCompare позволяет указать «sensitivity» сравнения.

Здесь мы использовали base «sensitivity» для сравнения строк с использованием их «базовых» символов (что означает, что регистр и акценты игнорируются).

Поддержка localeCompare() браузерами:

Больше / меньше

При сравнении строк с использованием операторов и > JavaScript будет сравнивать каждый символ в «лексикографическом порядке».

Это означает, что они сравниваются по буквам в том порядке, в котором они появляются в словаре:

При сравнении строк с использованием строчные буквы считаются большими, чем прописные.

Это происходит потому, что JavaScript использует значение каждого символа в Unicode, где строчные буквы идут после прописных.

True или false строки

Пустые строки в JavaScript считаются равными false при сравнении с использованием оператора == (но не при использовании === )

Строки со значением являются «истинными», поэтому вы можете делать нечто подобное:

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

Простой Array.sort()

Самый простой способ отсортировать массив строк — использовать метод Array.sort() :

При сортировке массива строк они сравниваются с использованием «кода UTF-16» каждого символа.

В Unicode заглавные буквы находятся перед строчными.

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

Вы можете избежать такого поведения, сначала преобразовав все строки в один и тот же регистр, или используя localeCompare (см. ниже), что обычно более эффективно.

localeCompare

Использование localeCompare в качестве функции сортировки позволяет сравнивать строки без учета регистра:

Вы также можете использовать localeCompare , чтобы игнорировать диакритические знаки (например, акцент) при сортировке строк. См. дополнительную информацию в разделе «Работа с диакритическими знаками».

Многострочные строки

Вы можете добавлять новые строки, используя \n :

В шаблонной строке новые строки учитываются внутри обратных кавычек:

В шаблонных строках вы можете избежать разрывов строки, добавив \ в конце строки.

Отступы в строках

Вы можете добавить пробел в начало или конец строки, пока она не достигнет указанной длины, используя padStart() или padEnd() :

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

Эта строка будет повторяться до тех пор, пока не будет достигнута целевая длина (строка будет обрезана, если она не помещается):

Поддержка padStart() и padEnd() браузерами::

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

Подстроки

Эти методы принимают индекс первого символа, который вы хотите извлечь из строки.

Они возвращают все от этого символа до конца строки:

Второй (необязательный) аргумент — это символ, на котором вы хотите остановиться.

Этот последний символ не включается в вывод:

Итак, какой из них вы должны использовать?

Они очень похожи, но с небольшими отличиями:

• Если конечное значение выше начального, substring() «исправит» их, заменив их местами, но slice() просто вернет пустую строку.

• substring() обрабатывает отрицательный индекс как 0 . С slice () вы можете использовать отрицательное число для обратного отсчета от конца строки. Например, .slice(-3) вернет последние 3 символа строки.

Также существует метод substr(), похожий на slice() и substring().

Это устаревший API. Хотя вряд ли он будет использоваться в ближайшее время, для работы со строками в JavaScript вам следует использовать один из двух вышеупомянутых методов, где это возможно.

Одиночные символы

Метод charAt() возвращает определенный символ из строки (помните, что индексы начинаются с 0):

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

Доступ к строке как к массиву может привести к путанице, когда строка хранится в переменной.

Использование charAt () более явное:

Изменение регистра строки в JavaScript

Вы можете сделать строку с заглавными буквами следующим образом:

Или все в нижнем регистре, например:

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

В зависимости от сравниваемых строк вам может потребоваться больший контроль над сравнением. Вместо этого рассмотрите возможность использования localeCompare.

Удаление пробелов

Следующие методы удаляют все пробелы, табуляции, неразрывные пробелы и символы окончания строки (например, \n ) из соответствующей части строки:

trimStart() и trimEnd() были введены в ES10 и теперь являются «предпочтительными» методами для использования в соответствии с этой спецификацией.

Однако на момент написания они не поддерживаются в браузере Edge.

Для совместимости во всех современных браузерах используйте trimLeft() и trimRight():

Поиск текста в строке

Найти позицию подстроки

Вы можете искать строку внутри другой строки в JavaScript с помощью indexOf() .

Этот метод вернет позицию первого упоминания искомой подстроки в строке или -1 , если подстрока не найдена:

Вы также можете использовать метод регулярных выражений search() , чтобы сделать то же самое:

Чтобы найти последнее вхождение поискового запроса, используйте lastIndexOf() :

Все эти методы вернут -1 , если подстрока не найдена в целевой строке.

Начинается с / заканчивается на

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

Однако ES6 добавил для этого специальные методы:

Поддержка startsWith() и endsWith() браузерами:

Includes

Если вам не важна конкретная позиция подстроки и важно только, находится ли она вообще в целевой строке, вы можете использовать includes() :

Поддержка includes() браузерами:

Регулярные выражения

Чтобы найти первое совпадение регулярного выражения, используйте .search() .

Чтобы вернуть массив, содержащий все совпадения регулярного выражения, используйте match() с модификатором /g (global):

(использование match() без модификатора /g вернет только первое совпадение и некоторые дополнительные свойства, такие как индекс результата в исходной строке и любые именованные группы захвата)

Если вам нужна дополнительная информация о каждом совпадении, включая их индекс в исходной строке, вы можете использовать matchAll .

Этот метод возвращает итератор, поэтому вы можете использовать цикл for … of для результатов. Вы должны использовать регулярное выражение с модификатором /g/ в matchAll() :

Замена символов в строке

Вы можете использовать replace() для замены определенного текста в строке.

Первый аргумент replace() — это текст, который нужно найти и заменить, второй — текст, которым его нужно заменить.

Передача строки в качестве первого аргумента заменяет только первое совпадение:

Если вы хотите заменить все совпадения, вы можете передать регулярное выражение с модификатором ‘greedy’ ( /g ) в качестве первого аргумента:

ES2021 добавил replaceAll() , чтобы упростить замену всех совпадений:

Поддержка replaceAll() браузерами:

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Источник