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

Определение и инициализация строк

Чаще всего для создания строк используют кавычки и просто помещают в них нужное значение (”Hello, World!”). Одинарные и двойные кавычки в языке уже давно и работают идентично, а обратные (Hello, World!) появились позже и имеют некоторые особенности. Так обратные кавычки могут занимать больше одной строки и в них можно вставлять выражения с помощью конструкции ${}. Кроме разных видов кавычек, в JavaScript также есть экранирующий символ (\). Его использование позволяет вставлять специальные символы, такие как сами кавычки внутри строки (\”), перенос на новую строку (\n), табуляция (\t), сам обратный слэш (\\) и другие внутри строковых значений.

const myString1 = "это строка с 'кавычками' внутри";
//можно просто использовать разные виды кавычек
const myString2 = `это строка с 
переносом`;
const myString3 = "и эта\n тоже";

const res = 2 + 2;
console.log(`ответ: ${res}`); //ответ: 4

Как и у других типов данных, у строк тоже есть конструктор, new String() но его поведение весьма специфично и может отличаться от ожидаемого потому что он возвращает объект а не строку. Для преобразования какого-либо значения в строку лучше передать его в глобальный объект String, а не использовать конструктор.

const str1 = new String("Hello world"); // [String: 'Hello world']
const str2 = String("Hello world"); // Hello world
str1.valueOf(); //Hello world
//конечно можно получить и строку из объекта, но придется писать больше кода
typeof str1; // "object"
typeof str2; // "string"

Основные операции над строками

Строки в JavaScript - итерируемый тип данных и итерируются они по символам. Число символов в строке можно узнать вызвав свойство length . У каждого символа есть индекс начиная с 0 у первого символа. Мы можем получить доступ к любому символу обратившись по его индексу. Мы так же можем получить индекс первого или последнего вхождения подстроки с помощью методов indexOf() и lastIndexOf() соответственно. Оба метода принимают саму подстроку и необязательным параметром индекс начала поиска. Если важен не индекс а сам факт наличия подстроки в начала, конце или определенном участке строки, можно воспользоваться методами startsWith() и endsWith(), которые принимают те же параметры и возвращают ответ в виде булева значения.

const myStr = "Hello, World!";
myStr[1]; //e
myStr.length; //13
myStr.indexOf("l"); //3
//"l" с индексом 2 не учитывалась потому что посик начат с 3
myStr.startsWith("Hell"); //true
myStr.endsWith("?"); //false

Важно помнить, что строки неизменяемый тип данных и мы не можем просто переопределить подстроку по индексу. Вместо этого следует создать новую строку с помощью метода slice(), который принимает индекс начала и необязательным параметром конца “среза” и возвращает подстроку, содержащую все символы исходной строки между указанными индексами. Если индекс конца не указан - “срез” будет сделан до конца исходной строки. Так же можно воспользоваться методом replace(), который, при базовом использовании, принимает искомую подстроку и подстроку, которая ее заменит и возвращает новую строку. Полученные строки, как и любые другие, можно конкатенировать (объединять) в новую строку с помощью оператора сложения “+” или метода concat() . Оператор сложения при конкатенации строки с числом преобразует число в строку.

const myStr = "Hello, World!";
const slice = myStr.slice(0, 6); //Hello,
const replace = myStr.replace("World", "John"); //Hello, John!
const myStr2 = "Number: " + 42; //Number: 42

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

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

Иногда нам нужно найти в строке не конкретную подстроку, а что-то более абстрактное, например все цифры, даты, слова на определенном языке или подстроки, содержащие определенные символы. В таких случаях на помощь приходят регулярные выражения (Regular Expressions или просто "регэксы") и специальные методы строк для работы с ними. Они позволяют сопоставлять и обрабатывать текст с использованием описанных шаблонов, что делает их очень полезными для поиска, замены и проверки наличия определенных паттернов в строках. Они состоят из символов и метасимволов, которые формируют шаблон. Вот некоторые из таких метасимволов, которые можно использовать в регулярных выражениях:

• . - любой символ, кроме переноса строки.
• \d - любая цифра
• \D - все, кроме цифр
• \w - любая буква
• \W - все, кроме букв
• \s - пробел
• ^ - начало строки.
• $ - конец строки.
• []: один символ из набора символов или диапазона символов. Например [abcd] и [a-d] это один и тот же набор символов.
• ( ) - группирует часть выражения в область видимости операторов.
  • предыдущий символ 0 или более раз.
  • предыдущий символ 1 или более раз.
• ? - предыдущий символ 0 или 1 раз.
• \ - экранирует следующий символ или указывает на специальные символы, такие как \n (новая строка) или \t (табуляция).

Регулярные выражения могут быть модифицированы с помощью флагов (модификаторов), которые определяют дополнительные параметры поиска. Вот некоторые распространенные модификаторы:

• g - поиск по всем совпадениям вместо первого.
• i - игнорировать регистр символов при поиске.
• m - ищет совпадения в каждой строке, а не только в начале и конце всей строки.

Регулярные выражения могут хранится как значение переменной с типом RegExp. Так шаблон для поиска всех строк или подстрок с датой в формате dd.mm.yyyy будет выглядеть как const datePattern=/\d{2}\.\d{2}\.\d{4}/g . Давайте его разберем: сначала идет слэш / как начало выражения, потом \d{2} означает две любые цифры, после них идет символ точки, экранированный обратным слэшем \., ведь иначе точка будет означать любой символ. Такая конструкция (\d{2}\.) повторяется трижды, но в последний раз мы ищем уже 4 цифры номера года. После этого идут закрывающий выражение слэш / и флаг g который указывает на то что выражение ищет все совпадения, а не только первое. JavaScript предоставляет несколько методов для работы с регулярными выражениями:

• test(): метод строки, который проверяет, соответствует ли строка заданному паттерну регулярного выражения. Он возвращает true, если совпадение найдено, и false в противном случае.
• exec(): метод регулярного выражения, который выполняет поиск совпадений в строке. Он возвращает массив с информацией о совпадении или null, если совпадение не найдено.
• match(): метод строки, который выполняет поиск совпадений в строке с использованием заданного паттерна регулярного выражения. Он возвращает массив с информацией о найденных совпадениях или null, если совпадение не найдено.
• search(): метод строки, который выполняет поиск позиции первого совпадения заданного паттерна регулярного выражения в строке. Он возвращает позицию совпадения или -1, если совпадение не найдено.

Регулярные выражения так же могут применяться в методах split() и replace().

const myStr1 = "Today is 20.08.2023, tomorrow will be 21.08.2023";
const datePattern = /\d{2}\.\d{2}\.\d{4}/g;
const dates = myStr1.match(datePattern); //[ '20.08.2023', '21.08.2023' ]

const myStr2 = "test@example.com";
const emailPattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
//шаблон проверки на соответствие адресу электронной почты
const isEmail = emailPattern.test(myStr2); //true

const myStr3 = "Hello, World! My name is John.";
const space = /\s/;
//этот шаблон можно заменить на строку с пробелом (" ").
const arrFromStr = myStr3.split(space); // ["Hello,", "World!", "My", "name", "is", "John."]

Заключение:

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