Коли я починав свій шлях як фронтенд-розробник, я часто стикався з труднощами в маніпуляціях рядками. Маніпуляції з рядками — це велика тема, але я постараюся бути лаконічним, щоб надати вам найважливішу інформацію з мінімальними зусиллями.
Що таке рядок в JavaScript?
У JavaScript рядок — це послідовність символів, обмежена одинарними лапками (' '), подвійними лапками (" ") або бектиками ().
Одинарні і подвійні лапки: Обидва варіанти виконують одну й ту саму функцію і можуть використовуватися взаємозамінно.
const singleQuoteString = 'Hello, World!';
const doubleQuoteString = "Hello, World!";
Бектики (Template Literals): Корисні для багато рядкових рядків і інтерполяції рядків. Дозволяють додавати динамічні значення до рядків.
const name = 'Alice';
const greeting = `Hello, ${name}!`;
Неприпустимість змінюваності рядків
Рядки в JavaScript — це примітивні типи даних і є незмінними.
Якщо рядок було призначено, його неможливо безпосередньо змінити.
let greeting = 'Hello';
greeting[0] = 'h'; // Це не працюватиме
console.log(greeting); // Вивід: Hello
Популярні методи роботи з рядками
charAt(index): Повертає символ на вказаному індексі.
const str = 'Hello';
console.log(str.charAt(1)); // Вивід: e
charCodeAt(index): Повертає Unicode символу на вказаному індексі.
const str = 'Hello';
console.log(str.charCodeAt(1)); // Вивід: 101
indexOf(substring): Повертає індекс першого входження вказаного підрядка.
const str = 'Hello, World!';
console.log(str.indexOf('World')); // Вивід: 7
lastIndexOf(substring): Повертає індекс останнього входження вказаного підрядка.
const str = 'Hello, World! Hello!';
console.log(str.lastIndexOf('Hello')); // Вивід: 13
slice(start, end): Вирізає частину рядка та повертає новий рядок.
const str = 'Hello, World!';
console.log(str.slice(7, 12)); // Вивід: Worl
substring(start, end): Повертає новий рядок, що містить символи від start до end.
const str = 'Hello, World!';
console.log(str.substring(7, 12)); // Вивід: World
replace(searchValue, newValue): Замінює перше входження вказаного значення на інше значення.
const str = 'Hello, World!';
const newStr = str.replace('World', 'Alice');
console.log(newStr); // Вивід: Hello, Alice!
replaceAll(searchValue, newValue): Замінює всі входження вказаного значення на інше значення.
const str = 'Hello, World! Welcome to the World!';
const newStr = str.replaceAll('World', 'Alice');
console.log(newStr); // Вивід: Hello, Alice! Welcome to the Alice!
toUpperCase(): Перетворює всі символи в рядку на великі літери.
const str = 'Hello';
console.log(str.toUpperCase()); // Вивід: HELLO
toLowerCase(): Перетворює всі символи в рядку на малі літери.
const str = 'Hello';
console.log(str.toLowerCase()); // Вивід: hello
trim(): Видаляє пробіли з обох кінців рядка.
const str = '5';
console.log(str.padStart(3, '0')); // Вивід: 005
padStart(targetLength, padString): Доповнює рядок іншими символами до вказаної довжини.
const str = '5';
console.log(str.padStart(3, '0')); // Вивід: 005
padEnd(targetLength, padString): Доповнює рядок іншими символами до вказаної довжини.
const str = '5';
console.log(str.padEnd(3, '0')); // Вивід: 500
repeat(count): Створює новий рядок, який містить вказану кількість копій оригінального рядка.
const str = 'Hello ';
console.log(str.repeat(3)); // Вивід: Hello Hello Hello
split(separator, limit): Розбиває рядок на масив підрядків за вказаним роздільником.
const str = 'apple,banana,cherry';
const fruits = str.split(',');
console.log(fruits); // Вивід: ['apple', 'banana', 'cherry']
includes(substring): Перевіряє, чи містить рядок вказаний підрядок.
const str = 'Hello, World!';
console.log(str.includes('World')); // Вивід: true
startsWith(substring): Перевіряє, чи починається рядок з вказаного підрядка.
const str = 'Hello, World!';
console.log(str.startsWith('Hello')); // Вивід: true
endsWith(substring): Перевіряє, чи закінчується рядок вказаним підрядком.
const str = 'Hello, World!';
console.log(str.endsWith('World!')); // Вивід: true
join(separator)
const fruits = ['apple', 'banana', 'cherry'];
const str = fruits.join(' - ');
console.log(str); // Вивід: apple - banana - cherry
Висновок
У цій статті ми розглянули основні функції маніпуляцій з рядками в JavaScript. Рядки — це важлива частина фронтенд-розробки, і оволодіння цими функціями допоможе вам ефективно працювати з динамічним контентом, введенням користувачів та іншими задачами.
Чи то порівняння рядків, пошук підрядків або форматування контенту, ці функції є важливими інструментами у будь-якому розробницькому наборі.
Перекладено з: [DAY-2] Everything About Strings in JavaScript