Методы работы со строками в JavaScript, которые должен знать каждый разработчик

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

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

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

1. Разбить строку на массив символов

Как разработчики, мы сталкиваемся со многими ситуациями, когда нам нужно разбить строки на массивы символов. Например, это один из самых часто задаваемых вопросов на собеседовании инженера-программиста. В JavaScript существует множество способов разбить строку на массивы символов:

расколоть()

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

let quote = 'I am Nipuni';

// Split string using the space character 

let array1 = quote.split(' '); 
console.log(array1); 
// ["I", "am", "Nipuni"] 
 
// Split string using an empty string (on each character)

let array2 = quote.split(''); 
console.log(array2); 
// ["I", " ", "a", "m", " ", "N", "i", "p", "u", "n", "i"]

от()

Метод from() класса Array является ведущим конкурентом метода split(). Это позволяет нам сделать массив из источника данных. Мы также можем использовать это, чтобы создать массив из итерируемой строки.

let name = "Nipuni Arunodi";
 
// String to array of chracters 

let nameChars = Array.from(name); 
console.log(nameChar); 
// ["N","i","p","u","n","i"," ","A","r","u","n","o","d","i"]

Оператор спреда (…)

Оператор распространения — это еще одна функция JavaScript, которая помогает нам создавать массив из строки.

let name = "Nipuni Arunodi";
 
// Spread out string into an array 

let nameChar = [...name]; 
console.log(nameChar); 
// ["N","i","p","u","n","i"," ","A","r","u","n","o","d","i"]

2. Проверить наличие определенной последовательности в строке

Подобно разделению, существует множество способов проверить наличие определенной последовательности в строке JavaScript. Для таких целей можно использовать метод includes(), indexOf() или регулярное выражение. Однако includes() является наиболее часто используемым методом для определения того, содержит ли строка букву или серию букв. Он был специально создан для этой цели.

const text = "Hi, My name is Nipuni"

console.log(text.includes("Nipuni")); 
// true

console.log(text.includes("Arunodi")); 
// false

3. Проверьте, начинается ли строка или заканчивается определенной последовательностью

includes() проверяет наличие определенной последовательности во всей строке. Если вы хотите определить, начинается или заканчивается строка определенной подстрокой, для этого есть два специализированных метода.

Строковый метод startsWith() определяет, начинается ли строка с определенной подстроки. Он вернет true, если строка начинается с указанной подстроки. В противном случае возвращается ложь.

const text = "Hi, My name is Nipuni"

console.log(text.startsWith("Hi")); // true

Метод endsWith() позволяет определить, заканчивается ли строка указанной строкой.

const text = "Hi, My name is Nipuni"

console.log(text.endsWith("Hi")); // false

4. Разбить строку на несколько разделителей

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

// Split on comma (,) and semicolon (;).

const list = "Car,Bus;Train"

const vehicles= list.split(/[,;]/);
console.log(fruits); 
// ["Car", "Bus", "Train"]

5. Обратные символы в строке

Это еще один стандартный вопрос для интервью с разработчиками начального уровня. Существует множество способов инвертировать строку с помощью JavaScript. Например, мы можем объединить метод split() с методами reverse() и join().

При таком подходе сначала нужно разбить строку на массив с помощью split(). Затем вы переворачиваете массив с помощью reverse(), а затем снова соединяете его с помощью функции join(). Это самый простой способ перевернуть строку в JavaScript.

const word = "Nipuni";
const reversedWord = [...word].reverse().join("");

console.log(reversedWord); // "inupiN"

6. Скопируйте строку несколько раз

repeat() — это строковый метод в JavaScript, который позволяет повторять строку заданное количество раз. Поскольку метод repeat() является методом строкового объекта, его необходимо использовать с конкретным экземпляром класса String.

// Concatenate "0" 10 times.

const zeroString= "0".repeat(10);
console.log(zeroString); // "0000000000"

7. Дополнить строку до определенной длины

Иногда вы можете захотеть, чтобы ваша строка имела заданную длину. Если ваша строка слишком короткая, вам нужно заполнить пробелы, пока она не достигнет желаемой длины. Раньше люди часто использовали для этого библиотеки. Вместо этого теперь вы можете использовать методы padStart() и padEnd() для заполнения строки в начале или в конце.

// Add 0 to the beginning until the string has a length of 10.
const string = "001".padStart(10, "0");
console.log(string); // "0000000001"

// Add * to the end until the string has a length of 10.
const string = "99".padEnd(10, "*");
console.log(string ); // "99********"

8. Подсчитайте символы в строке

Вы можете легко использовать метод string.length, чтобы получить длину строки. Он вернет количество символов в строке.

const word = "Nipuni";
console.log(word.length); // 6

9. Преобразование буквы в строке в верхний или нижний регистр

Вы можете использовать методы toUpperCase() и toLowerCase() для преобразования символа строки в верхний или нижний регистр соответственно. Например, если вам нужно сделать первую букву заглавной, вы можете использовать следующие подходы:

// Method 1 - To Uppercase
let name = "nipuni";
name = name[0].toUpperCase() + name.substr(1);
console.log(name); // "Nipuni"

// Method 1 - To Lowercase
name = name[0].toLowerCase() + name.substr(1);
console.log(name); // "nipuni"

// Method 2 - To Uppercase
let name = "nipuni";
const characters = [...name];
characters[0] = characters[0].toUpperCase();
name = characters.join("");
console.log(name); // "Nipuni"

// Method 2 - To Lowercase
const characters = [...name];
characters[0] = characters[0].toLowerCase();
name = characters.join("");
console.log(name); // "Nipuni"

10. Заменить все вхождения строки

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

Однако в 2021 году JavaScript представил новый метод с именем replaceAll() для одновременной замены всех вхождений. Однако в настоящее время этот новый подход доступен не во всех браузерах и не во всех последних версиях Node.js.

const text = "I like Cars. Cars have 4 wheels"
console.log(text.replace(/Cars/g, "Vans"));
// "I like Vans. Vans have 4 wheels"

console.log(text.replaceAll("Cars", "Vans"));
// "I like Vans. Vans have 4 wheels"

Заключение

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

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

Essential JS 2 от Syncfusion — единственный пакет, который вам когда-либо понадобится для создания приложения. Он содержит более 65 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить элементы управления сегодня.

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

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 11 октября 2022 г.