Индексация, разделение и управление строками в JavaScript

Введение

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

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

Примитивы и объекты String

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

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

// Initializing a new string primitive
const stringPrimitive = "A new string.";

// Initializing a new String object
const stringObject = new String("A new string.");  

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

typeof stringPrimitive;

Output
string

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

typeof stringObject;

Output
object

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

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

Процедура индексации строк

Каждому из символов в строке соответствует числовой индекс, начиная с 0.

Для наглядности мы создадим строку со значением How are you?.

Первый символ этой строки — H, ему соответствует индекс 0. Последний символ — ?, соответствующий символу 11. У символов пробела также имеются индексы на позициях 3 и 7.

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

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

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

"How are you?";

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

"How are you?"[5];

Output
r

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

"How are you?".charAt(5);

Output
r

Другой способ: мы можем использовать indexOf() для возврата числового индекса для первого экземпляра символа.

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

Output
1

Хотя “o” появляется в строке How are you? дважды, метод indexOf() выдаст результат для первого экземпляра.

lastIndexOf() используется для поиска последнего экземпляра.

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

Output
9

С помощью обоих этих методов также можно найти несколько символов в строке. Он возвращает индекс первого символа в экземпляре.

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

Output
4

С другой стороны, метод slice() возвращает символы между двумя числовыми индексами. Первым параметром будет начальный числовой индекс, а вторым — конечный числовой индекс.

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

Output
you

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

Если второй параметр не указывается, slice() возвращает все символы от первого параметра до конца строки.

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

Output
you?

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

Определение длины строки

Свойство length позволяет вывести количество символов в строке.

"How are you?".length;

Output
12

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

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

Встроенные методы toUpperCase() и toLowerCase() можно использовать для форматирования и сравнения текста в JavaScript.

toUpperCase() конвертирует все символы в верхний регистр.

"How are you?".toUpperCase();

Output
HOW ARE YOU?

toLowerCase() конвертирует все символы в нижний регистр.

"How are you?".toLowerCase();

Output
how are you?

Эти два метода форматирования не принимают дополнительных параметров.

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

Разделение строк

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

const originalString = "How are you?";

// Split string by whitespace character
const splitString = originalString.split(" ");

console.log(splitString);

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

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

splitString[1];

Output
are

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

Разделяя строки, вы можете определить, сколько слов содержится в предложении, или использовать метод для определения имен и фамилий людей.

Обрезка пробелов

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

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);

Output
How are you?

Метод trim() — это простой способ выполнения распространенной задачи по удалению лишних пробелов.

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

Мы можем использовать метод replace(), чтобы найти в строке значение и заменить его новым значением. Первым параметром будет искомое значение, а вторым параметром — значение, которое его заменит.

const originalString = "How are you?"

// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");

console.log(newString);

Output
Where are you?

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

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

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);

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

Это очень распространенная задача с использованием регулярных выражений. Посетите Regexr, чтобы потренироваться с другими примерами регулярных выражений.

Заключение

Строки — один из самых распространенных типов данных, и с ними можно выполнять множество разных операций.

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

Более общий обзор строк можно найти в учебном модуле Работа со строками в JavaScript.