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

Вступление

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

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

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

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

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

typeof stringObject;
Outputobject

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

Хотя эта концепция поначалу немного сложна, вы должны понимать разницу между примитивом и объектом. По сути, есть методы и свойства, доступные для всех строк, и в фоновом режиме 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];
Outputr

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

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

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

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

Хотя «o» встречается дважды в строкеHow are you?,indexOf() получит первый экземпляр.

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

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

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

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

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

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

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

Если второй параметр не включен,slice() вернет все, от параметра до конца строки.

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

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

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

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

"How are you?".length;
Output12

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

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

Два встроенных методаtoUpperCase() иtoLowerCase() - полезные способы форматирования текста и выполнения текстовых сравнений в JavaScript.

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

"How are you?".toUpperCase();
OutputHOW ARE YOU?

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

"How are you?".toLowerCase();
Outputhow are you?

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

Стоит отметить, что эти методы не меняют исходную строку.

Расщепление строк

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

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

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

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

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

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);
OutputHow 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);
OutputWhere are you?

Помимо возможности заменить значение другим строковым значением, мы также можем использоватьRegular Expressions, чтобы сделатьreplace() более мощным. Например,replace() влияет только на первое значение, но мы можем использовать флагg (global), чтобы перехватить все экземпляры значения, и флаг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);
OutputJavaScript is a programming language. I'm learning JavaScript.

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

Заключение

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

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

Для более общего обзора строк прочитайте учебник «https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript[How To Work with Strings in JavaScript]».