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

Введение

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

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

Строковые примитивы и строковые объекты

Во-первых, мы уточним два типа строк. JavaScript различает строковый примитив, неизменяемый тип данных и объект 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.

Для демонстрации мы создадим строку со значением Как дела?.

Первый символ в строке — 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, чтобы попрактиковаться в других примерах RegEx.

Заключение

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

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

Более общий обзор строк можно найти в руководстве «Как работать со строками в JavaScript».