- Строковые методы JS
- Кавычки#
- Спецсимволы#
- Методы строк в JavaScript: простая шпаргалка с примерами
- Как изменить регистр
- toLowerCase
- toUpperCase
- Как объединить строки
- concat
- Как разделить строку на подстроки
- split
- Как повторить строку
- repeat
- Как найти подстроку
- charAt
- includes
- indexOf
- lastIndexOf
- endsWith
- startsWith
- search
- Как извлечь подстроку
- slice
- substring
- substr
- Как заменить подстроку
- replace
- replaceAll
- Как добавить в строку пробелы или другие символы
- padEnd
- padStart
- Как удалить пробелы в строке
- trim
- trimEnd
- trimStart
- Как работать с Юникодом
- charCodeAt
- fromCharCode
- Что думаете?
Строковые методы JS
В JavaScript любые текстовые данные являются строками. Не существует отдельного типа «символ», который есть в ряде других языков.
Кавычки#
В JavaScript есть разные типы кавычек.
Строку можно создать с помощью одинарных, двойных либо обратных кавычек:
Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в $:
Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, вот так:
Выглядит вполне естественно, не правда ли? Что тут такого? Но если попытаться использовать точно так же одинарные или двойные кавычки, то будет ошибка:
Одинарные и двойные кавычки в языке с незапамятных времён: тогда потребность в многострочных строках не учитывалась. Что касается обратных кавычек, они появились существенно позже, и поэтому они гибче.
Обратные кавычки также позволяют задавать «шаблонную функцию» перед первой обратной кавычкой. Используемый синтаксис: func string . Автоматически вызываемая функция func получает строку и встроенные в неё выражения и может их обработать. Если перед строкой есть выражение, то шаблонная строка называется «теговым шаблоном». Это позволяет использовать свою шаблонизацию для строк, но на практике теговые шаблоны применяются редко.
Спецсимволы#
Многострочные строки также можно создавать с помощью одинарных и двойных кавычек, используя так называемый «символ перевода строки», который записывается как \n:
Методы строк в JavaScript: простая шпаргалка с примерами
Любые текстовые данные в JavaScript считаются строками. Это примитивный тип, но язык позволяет работать с ним так, будто он является объектом. В том числе — использовать встроенные в JS методы строк, которые собраны в этой шпаргалке.
Важно: при использовании методов создаётся новая строка, которая записывается в ту же переменную вместо старой строки.
Как изменить регистр
toLowerCase
Преобразует символы в строке в нижний регистр.
"Hello Tproger".toLowerCase(); // "hello tproger"
toUpperCase
Преобразует символы в строке в верхний регистр.
"Hello Tproger".toUpperCase(); // "HELLO TPROGER"
Как объединить строки
concat
Объединяет две или более строки и возвращает одну строку.
"Hello".concat(" Tproger"); // "Hello Tproger" "Hello".concat(" T", "p", "r", "o", "g", "e", "r"); // "Hello Tproger"
Как разделить строку на подстроки
split
Разбивает строку в массив по указанному разделителю, которым может быть подстрока или регулярное выражение. Вторым параметром можно указать ограничитель.
// Получаем каждый символ "Hello Tproger".split(""); // ["H", "e", "l", "l", "o", " ", "T", "p", "r", "o", "g", "e", "r"] // Получаем каждое слово из строки "Hello Tproger".split(" "); //["Hello", "Tproger"] // Устанавливаем ограничитель "Hello Tproger".split(" ", 1); //["Hello"]
Как повторить строку
repeat
Принимает в качестве параметра число и повторяет строку указанное количество раз.
"Tproger ".repeat(3); // "Tproger Tproger Tproger "
Как найти подстроку
charAt
Возвращает символ по указанному индексу.
includes
Проверяет, содержит ли строка указанную подстроку. Возвращает значение true или false. Вторым параметром можно указать позицию в строке, с которой следует начать поиск.
"Hello Tproger".includes("Tproger"); // true "Hello Tproger".includes("Hello", 1); // false
indexOf
Возвращает индекс первого найденного вхождения указанного значения. Поиск ведётся от начала до конца строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.
"Hello World".indexOf("o"); // 4 "Hello World".indexOf("o", 5); // 7
lastIndexOf
Возвращает индекс последнего найденного вхождения указанного значения. Поиск ведётся от конца к началу строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.
"Hello World".lastIndexOf("o"); // 7 "Hello World".lastIndexOf("o", 5); // 4
endsWith
Проверяет, заканчивается ли строка символами, заданными первым параметром. Возвращает true или false. Есть второй необязательный параметр — ограничитель по диапазону поиска. По умолчанию он равен длине строки.
"Hello Tproger".endsWith("Tproger"); // true "Hello Tproger".endsWith("Tproger", 12); // false
startsWith
Проверяет, начинается ли строка с указанных символов. Возвращает true или false. Вторым параметром можно указать индекс, с которого следует начать проверку.
"Hello Tproger".startsWith("Hello"); // true "Hello Tproger".startsWith("Hello", 1); // false
search
Проверяет, есть ли в строке указанное значение или регулярное выражение и возвращает индекс начала совпадения.
"hi, hello, hey".search("hello"); // 4
Как извлечь подстроку
slice
Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).
"Методы строк на Tproger".slice(16); // "Tproger" "Методы строк на Tproger".slice(16, 21); // "Tprog" // Отрицательные значения тоже работают "Методы строк на Tproger".slice(-7); // "Tproger" "Методы строк на Tproger".slice(-7, -2); // "Tprog"
substring
Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.
"Методы строк на Tproger".substring(5, 2); // "тод"
substr
Извлекает часть строки указанной длины. Первым параметром принимает стартовую позицию, вторым — длину. Значение первого параметра может быть отрицательным, тогда позиция определяется с конца строки.
"Методы строк на Tproger".substr(7, 5); // "строк" "Методы строк на Tproger".substr(-7, 5); // "Tprog"
Как заменить подстроку
replace
Ищет в строке указанное значение или регулярное выражение и возвращает новую строку, в которой выполнена замена на второй параметр. Можно заменить найденные значения другой строкой или передать функцию для работы над совпадениями.
"hi, hello, hi".replace("hi", "hey"); // "hey, hello, hi" "hi, hello, hi".replace(/hi/g, "hey"); // "hey, hello, hey"
replaceAll
Даёт такой же результат, как метод replace() с глобальным флагом g. Заменяет все найденные совпадения другой строкой или переданной функцией.
"hi, hello, hi".replaceAll("hi", "hey"); // "hey, hello, hey"
Как добавить в строку пробелы или другие символы
padEnd
Добавляет в конце отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.
"Hello Tproger".padEnd(20, "*"); // "Hello Tproger*******"
padStart
Добавляет в начале отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.
"Hello Tproger".padStart(20, "*"); // "*******Hello Tproger"
Как удалить пробелы в строке
trim
Обрезает пробелы с обоих концов строки.
" Hello Tproger ".trim(); // "Hello Tproger"
trimEnd
Обрезает пробелы в конце строки
" Hello Tproger ".trimEnd(); // " Hello Tproger"
trimStart
Обрезает пробелы в начале строки
" Hello Tproger ".trimStart(); // "Hello Tproger "
Как работать с Юникодом
charCodeAt
Возвращает числовое значение Юникода по указанному индексу. Обратите внимание: у букв в верхнем и нижнем регистрах разные коды.
"T".charCodeAt() // 84 "t".charCodeAt() // 116
fromCharCode
Преобразует числовые значения Юникода в читаемые символы.
String.fromCharCode(72, 101, 108, 108, 111); // "Hello"
Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.
'?'.length; // 2, редкий китайский иероглиф
Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.
Для работы со строками в JS есть не только встроенные методы, но и сторонние библиотеки. Они решают задачи более сложные задачи. Но подключать их имеет смысл только в том случае, если возможностей встроенных методов действительно не хватает.
Больше полезных материалов по JS:
Что думаете?
Прочитал статью, глянул список вакансий, а там из связанного с IT, разве что PM. Статье 2 дня, неужели за 2 дня успели найти «нормальных мидлов»?)Что-то не сходится.
К слову сказать, моя гештальт-психотерапевт помогла это отработать, по крайне мере, убрать пиковые проявления. Чувство, что «я недо» до сих пор проскакивает, но теперь его легче сразу осознать и не дать этой мысли развиться. Так что синдром самозванца поправим)
Вот про парную работу людей, которые знают разные системы сайта: в точку. В моем случае один питонист, а второй хорошо знает систему продаж, вместе получается писать кастомную аналитику продаж для Google Looker. По отдельности каждый укатывается в глубокие затыки, как оказалось. Так что синергия – сила!Интересно, что джунов и мидлов можно в пару ставить, а вот двух сеньоров – уже не стоит. Что это: неизбежный рост самомнения?