Маніпулювання текстовими даними може перетворитися на справжній головний біль для розробників, якщо не володіти необхідними інструментами.
Щоб уникнути цих складнощів, важливо добре знати ключові властивості та методи, які JavaScript пропонує для роботи з рядками.
Давайте розглянемо їх детальніше.
Властивість `length`
Властивість `length` дозволяє дізнатися, скільки символів містить певний рядок.
const company = "techukraine.net"; console.log(company.length);
Метод `toUpperCase()`
Метод `toUpperCase()` трансформує всі символи рядка у верхній регістр, повертаючи новий рядок з цими змінами. Важливо, що вихідний рядок залишається без змін.
const company = "techukraine.net"; const upperCaseCompany = company.toUpperCase(); console.log(upperCaseCompany);
Метод `toLowerCase()`
Метод `toLowerCase()` аналогічно перетворює всі символи рядка у нижній регістр, повертаючи результат. Оригінальний рядок при цьому не змінюється.
const company = "techukraine.net"; const lowerCaseCompany = company.toLowerCase(); console.log(lowerCaseCompany);
Метод `trim()`
Метод `trim()` ефективно видаляє пробіли на початку та в кінці рядка. Ця операція створює новий рядок без початкових і кінцевих пробілів, не змінюючи вихідний рядок.
const company = " Geek Flare "; console.log(company); console.log(company.trim());
Метод `charAt(індекс)`
Метод `charAt(індекс)` дозволяє отримати символ рядка за вказаним числовим індексом. Якщо індекс недійсний (виходить за межі рядка), метод повертає порожній рядок.
const company = "techukraine.net"; console.log(company.charAt(2)); console.log(company.charAt(10));
Метод `charCodeAt(індекс)`
Метод `charCodeAt(індекс)` повертає Unicode (ASCII) код символу за заданим індексом. У випадку недійсного індексу повертається значення `NaN`.
const company = "techukraine.net"; console.log(company.charCodeAt(2)); console.log(company.charCodeAt(10));
Метод `slice(startIndex, endIndex)`
Метод `slice` створює копію частини рядка, починаючи з позиції `startIndex` і закінчуючи, але не включаючи, позицію `endIndex`. Наприклад, `String.slice(0, 6)` поверне частину рядка від індексу 0 до 5.
const company = "techukraine.net"; console.log(company.slice(0, 4));
Якщо методу `slice` передати лише один аргумент, він створить підрядок, починаючи з вказаного індексу і до самого кінця рядка.
const company = "techukraine.net"; console.log(company.slice(4));
Метод `slice` також приймає від’ємні індекси. В цьому випадку, індекси відраховуються з кінця рядка. Розглянемо на прикладі:
Для рядка “techukraine.net”, від’ємні індекси будуть наступними:
t = -12, e = -11, c = -10, h = -9, u = -8, k = -7, r = -6, a = -5, i = -4, n = -3, e = -2, . = -1
Тож код `string.slice(-9, -5)` поверне `hukr`.
const company = "techukraine.net"; console.log(company.slice(-9, -5));
Код `string.slice(-5)` поверне `.net`.
const company = "techukraine.net"; console.log(company.slice(-5));
Примітка: Від’ємне індексування не підтримується в Internet Explorer 8 і попередніх версіях.
Метод `substr(startIndex, length)`
Метод `substr` схожий на `slice`. Єдина відмінність полягає в тому, що `substr` приймає довжину підрядка, який потрібно витягти, замість кінцевого індексу.
const company = "techukraine.net"; console.log(company.substr(4, 5));
Існує також метод `substring`, аналогічний до `slice`. Однак метод `substring` не підтримує використання від’ємних індексів. Рекомендується спробувати його самостійно.
Метод `replace(підрядок, новийПідрядок)`
Метод `replace` шукає перший екземпляр заданого підрядка в рядку та замінює його на новий підрядок, повертаючи змінений рядок.
const statement = "Visit the site Google";
console.log(statement.replace("Google", "techukraine.net"));
Метод `indexOf(підрядок)`
Метод `indexOf` повертає індекс першого входження вказаного підрядка в рядку. Якщо підрядок не знайдено, повертається -1.
const company = "techukraine.net";
console.log(company.indexOf("Flare"));
console.log(company.indexOf("O"));
Метод `indexOf` може приймати другий аргумент, який вказує, з якого індексу починати пошук.
const company = "techukraine.net";
console.log(company.indexOf("e"));
console.log(company.indexOf("e", 5));
Існує також метод `lastIndexOf`, який діє аналогічно до `indexOf`, але здійснює пошук з кінця рядка до початку. Спробуйте використати його, наприклад, `company.lastIndexOf(‘e’)`.
Метод `split(підрядок)`
Метод `split` розбиває рядок на масив підрядків, використовуючи вказаний роздільник.
const statement = "Visit, the, site, techukraine.net";
console.log(statement.split(" "));
console.log(statement.split(", "));
Підсумок
Це лише основні методи. Рекомендується вивчити повний перелік методів для роботи з рядками в документації JavaScript. Можливо, існують й інші методи, які виявляться корисними у вашому конкретному випадку.
Шукайте, експериментуйте та використовуйте їх у своїх проектах.
Вдалих розробок! 🙂
Далі ознайомтеся з деякими популярними фреймворками JavaScript.