Основы работы со строками в JS на примерах

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

split

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

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

Есть два метода для поиска подстроки:

Использование indexOf():

indexOf() метод начинает поиск подстроки с начала строки, и возвращает позицию начала первого вхождения подстроки. В данном случае — 7 позиция.

Использование lastIndexOf():

Метод возвращает начальную позицию последнего вхождения подстроки в строку.

В обоих методах, если подстрока не найдена, возвращается значение -1, и оба принимают необязательный второй аргумент, указывающий положение в строке, где вы хотите начать поиск. Таким образом, если второй аргумент «5», indexOf() начинает поиск с 5 символа, игнорируя символы 0-4, в то время как lastIndexOf() начинает поиск с символа 5 и идет в обратном направлении, игнорируя символы 6 и дальше.

Видео

Метод concat()

Метод concat() объединяет две или более строк:

Этот concat() метод можно использовать вместо оператора плюс. Эти две строки делают то же самое:

Пример

var text = "Привет" + " " + "Мир!"; var text = "Привет".concat(" ", "Мир!");

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

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

Методы toLowerCase и toUpperCase помогут нам изменить регистр строк. Они пригодятся при использованииindexOf и lastIndexOf, так как в строке могут быть символы разных регистров. Рассмотрим работу методов на примере:

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

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

Чтобы соеденить две и более строки, мы можем ипользовать простую конкатинацию ("+")

Но, в JavaScript для таких операций предусмотрен метод concat():

Как обычная конкатинация, так и метод concat(), позволяют соединить более двух подстрок в результатирующую строку.

Метод slice()

Метод slice() извлекает часть строки и возвращает извлеченную часть в новой строке.

Метод принимает 2 параметра: начальную позицию и конечную позицию (конец не включен).

В этом примере часть строки вырезается из позиции 7 в позицию 12 (13-1):

Пример

var str = "Яблоко, Банан, Киви"; var res = str.slice(7, 13);

Результатом res будет:

Банан Попробуйте сами »

Помните: JavaScript считает позиции с нуля. Первая позиция — 0.

Если параметр отрицательный, позиция отсчитывается от конца строки

В этом примере часть строки вырезается из позиции -12 в позицию -6:

Пример

var str = "Яблоко, Банан, Киви"; var res = str.slice(-12, -6);

Результатом res будет:

Банан Попробуйте сами »

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

или, считая с конца:

Отрицательные позиции не работают в Internet Explorer 8 и ранее.

Нахождение длины строк

С помощью свойства length мы можем получить количество символов в строках. Давайте найдем длину примитивной строки:

Длина строки

Свойство length содержит длину строки:

alert( `My\n`.length ); // 3

Обратите внимание, \n — это один спецсимвол, поэтому тут всё правильно: длина строки 3.

length — это свойство

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

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

padEnd

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

padStart

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

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

Содержимое строки в JavaScript нельзя изменить. Нельзя взять символ посередине и заменить его. Как только строка создана — она такая навсегда.

Давайте попробуем так сделать, и убедимся, что это не работает:

let str = ‘Hi’; str[0] = ‘h’; // ошибка alert( str[0] ); // не работает

Можно создать новую строку и записать её в ту же самую переменную вместо старой.

Например:

let str = ‘Hi’; str = ‘h’ + str[1]; // заменяем строку alert( str ); // hi

В последующих разделах мы увидим больше примеров.

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

• Чтобы определить вхождение слова или символа в строку, используйте функцию «indexOf». Она возвращает позицию найденной подстроки или «-1», если ничего не найдено.

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

  Переменная «Regex» содержит регулярное выражение, со специальным правилом для поиска. В данном примере конструкция «(\d+)» обозначает последовательность цифр. В качестве результата возвращается массив со всеми найденными элементами. Если убрать директиву «g», то в результат попадет только первый найденный элемент.

  Регулярные выражения в js — это отдельная тема. Частично можете ознакомиться с ними из статьи по валидации полей.

Посимвольное сравнение

Сравнение строк работает лексикографически, иначе говоря, посимвольно.

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

1. Сравниваются первые символы: s1[0] и s2[0]. Если они разные, то сравниваем их и, в зависимости от результата их сравнения, возвратить true или false. Если же они одинаковые, то…
2. Сравниваются вторые символы s1[1] и s2[1]
3. Затем третьи s1[2] и s2[2] и так далее, пока символы не будут наконец разными, и тогда какой символ больше — та строка и больше. Если же в какой-либо строке закончились символы, то считаем, что она меньше, а если закончились в обеих — они равны.

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

Преобразование в верхний или нижний регистр

Встроенные методы toUpperCase() и toLowerCase() используются для форматирования текста и сравнения строковых значений.

toUpperCase() преобразует все символы в верхний регистр.

toLowerCase() преобразует все символы в нижний регистр.

JavaScript Selections (работа с выделениями)

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

Получить символ по заданной позиции в строке

Получить символ мы можем с помощью функции charAt():

Как часто бывает в JavaScript, первая позиция в строке начинается с 0, а не с 1.

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

Заметьте, что код для символа «F» (11 позиция) другой, нежели у символа «f» (позиция 7).

Метод substr () в JavaScript

Строковый метод substr() похож на slice() с той разницей, что 2-й параметр показывает длину извлечённой детали.

Результат: Banana.

Мы можем опустить 2-й параметр — тогда строковый метод substr() разрежет оставшуюся часть строки.

Получим: Banana, Kiwi.

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

Результат: Kiwi.

Как индексируются строки

Каждый символ строки соответствует индексу, начиная с 0. Чтобы это продемонстрировать, создадим строку со значением How are you?

H	o	w	a	r	e	y	o	u	?
1	2	3	4	5	6	7	8	9	10	11

Первый символ строки –H, который соответствует индексу 0. Последний символ – ? соответствует индексу 11. Символы пробелов имеют индексы 3 и 7.

Разбиение на массив

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

• Обратная функция «join».

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

В примере используется синтаксис ECMAScript 6, может не поддерживаться устаревшими браузерами.

Теги