Как индексировать, разбивать и манипулировать строками в JavaScript

Введение

Строка – это последовательность одного или более символов, которые могут состоять из букв, цифр или других знаков. Каждый символ в строке 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?

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

Первый символ строки –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” был подготовлен дружной командой проекта Сайтостроение от А до Я.