JS:работа со строками

JS работа со строками - введение

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

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

Примитивные строковые типы и String Objects

Для начала мы проясним различие между двумя типами строк. JavaScript различает примитивную строку (неизменяемый тип) и объект String.

Чтобы понять различия между ними, инициализируем примитивную строку и объект-строку.

// Инициализируемпримитивнуюстроку
const stringPrimitive = "A new string.";

// ИнициализируемString Objects
const stringObject = newString("A new string.");  

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

typeof stringPrimitive;

Вывод

string

Во втором примере мы использовали конструктор new String(), чтобы создать объект-строку и присвоить его переменной.

typeof stringObject;

Вывод

object

В большинстве случаев вы будете создавать примитивные строки. JavaScript может использовать свойства и методы объекта String без явного приведения примитивной строки к object.

Методы и свойства String Objects доступны для всех строк. Но JavaScript осуществляет конвертацию строки в объект и обратно каждый раз, когда вызывается метод или свойство.

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

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

Howareyou?
01234567891011

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

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

Продемонстрируем, как получить доступ к символам и индексам строки How are you?

"How are you?";

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

"How are you?"[5];

Вывод

r

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

"Howareyou?".charAt(5);

Вывод

r

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

"How are you?".indexOf("o");

Вывод

1

Несмотря на то, что символ "o" появляется в строке How are you? дважды, indexOf() вернёт позицию первого вхождения.

lastIndexOf() используется, чтобы найти последнее вхождение.

"How are you?".lastIndexOf("o");

Вывод

9

Оба метода также можно использовать для поиска нескольких символов в строке. Они вернут индекс первого символа.

"How are you?".indexOf("are");

Вывод

4

А вот метод slice() вернёт символы между двумя индексами.

"How are you?".slice(8, 11);

Вывод

you

Обратите внимание на то, что 11– это ?, но? не входит в результирующую строку. slice() вернёт всё, что между указанными значениями индекса. Если второй параметр опускается, slice() вернёт всё, начиная от первого параметра до конца строки.

"How are you?".slice(8);

Вывод

you?

Методы charAt() и slice() помогут получить строковые значения на основании индекса. А indexOf() и lastIndexOf() делают противоположное, возвращая индексы на основании переданной им строки.

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

Используя свойство length, можно получить количество символов в строке.

"How are you?".length;

Вывод

12

Помните, что свойство length возвращает реальное количество символов, начиная с 1. Вы получите результат 12, а не значение индекса последнего символа, который считается с 0.

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

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

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

"How are you?".toUpperCase();

Вывод

HOW ARE YOU?

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

"Howareyou?".toLowerCase();

Вывод

howareyou?

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

Разбиение строк

JavaScript предоставляет метод для разбиения строк по символу и создания нового массива из полученных частей. Мы используем метод split(), чтобы разбить строку на массив по символу пробела, который представлен строкой " ".

constoriginalString = "How are you?";

// Разбиваемстрокупопробелу
const splitString = originalString.split(" ");

console.log(splitString);

Вывод

[ 'How', 'are', 'you?' ]

Теперь, когда у нас есть новый массив в переменной splitString, можно получить доступ к каждой его части по индексу.

splitString[1];

Вывод

are

Если методу split() передана пустая строка, он создаст массив из всех отдельных символов строки. При помощи разбиения строк можно определить количество слов в предложении.

Отсечение пробелов

Метод trim() в JavaScript убирает пробелы с обоих концов строки, но не внутри неё. Под пробелами понимаются как обычные пробелы, так и символы табуляции.

consttooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);

Вывод

How are you?

Метод trim()– это простой способ избавиться от лишних пробелов.

Поиски замена строковых значений

С помощью метода replace() можно осуществлять поиск строки и её замену новым значением. В качестве первого параметра методу следует передать значение для поиска, а вторым – значения для замены.

constoriginalString = "How are you?"

// Заменяем первое вхождение строки "How" на "Where"
constnewString = originalString.replace("How", "Where");

console.log(newString);

Вывод

Where are you?

Также можно использовать регулярные выражения. Например, метод replace() затрагивает только первое вхождение искомой строки. Но мы можем использовать флаг g (глобальный), чтобы найти все вхождения, и флаг i (независимый от регистра), чтобы игнорировать регистр.

constoriginalString = "Javascript is a programming language. I'm learning javascript."

// Ищемвсевхождениястроки"javascript" изаменяемеёна"JavaScript"
constnewString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);

Вывод

JavaScript is a programming language. I'm learning JavaScript.

Заключение

В этой статье мы изучили различие между примитивными строками и объектом String. А также узнали, как индексируются строки и как использовать методы и свойства JavaScript для доступа к символам строки, форматирования текста, поиска и замены значений в строках.

Пожалуйста, оставляйте свои отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, подписки, отклики, дизлайки!

Пожалуйста, оставьте свои мнения по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки низкий вам поклон!

Сергей Бензенкоавтор-переводчик статьи «Index, Slice, Split, and Manipulate JavaScript Strings»