Робота з рядками без знання методів стане кошмаром для розробників.
Щоб позбутися цих кошмарів, нам потрібно знати найважливіші властивості та методи рядків у JavaScript.
Давайте досліджувати їх один за іншим.
довжина
Властивість 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 видаляє початкові та кінцеві пробіли з рядка. Це операція на місці, тобто оновлюється вихідний рядок.
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 повертає ASCII-код символу за заданим індексом. Він повертає NaN, якщо індекс недійсний.
const company = "techukraine.net"; console.log(company.charCodeAt(2)); console.log(company.charCodeAt(10));
slice(startIndex, endIndex)
Зріз методу повертає підрядок із рядка від startIndex до endIndex (не включаючи). String.slice(0, 6) повертає підрядок від 0-го індексу до 5-го індексу.
const company = "techukraine.net"; console.log(company.slice(0, 4));
Зріз методу також прийматиме аргумент sing. Якщо ви передаєте один аргумент методу slice, він поверне підрядок із заданого індексу до кінця рядка.
const company = "techukraine.net"; console.log(company.slice(4));
Зріз методу також прийматиме від’ємні індекси. Від’ємні індекси відраховуються з кінця рядка. Давайте розглянемо приклад, оскільки він є новим для більшості людей.
Дано рядок techukraine.net, негативні індекси є
G = -9, e = -8, e = -7, k = -6
і так далі…
Код string.slice(-9, -5) поверне Geek для наведеного вище прикладу.
const company = "techukraine.net"; console.log(company.slice(-9, -5));
Код string.slice(-5) поверне Flare для наведеного вище прикладу.
const company = "techukraine.net"; console.log(company.slice(-5));
Примітка: негативне індексування не працюватиме в IE8 і попередніх версіях.
substr(startIndex, length)
Метод substr подібний до методу зрізу. Єдина відмінність полягає в тому, що метод substr приймає довжину підрядка, яку потрібно витягти з вихідного рядка.
const company = "techukraine.net"; console.log(company.substr(4, 5));
Існує ще один метод під назвою substring, подібний до методу slice. Але підрядок методу не прийматиме від’ємні індекси. Спробуй.
замінити (підрядок, новапідрядок)
Метод replace замінює перший екземпляр підрядка на newSubString.
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. Єдина відмінність полягає в тому, що метод lastIndexOf шукає символ, починаючи з кінця рядка, і повертає індекс першого екземпляра символу. Спробуйте це для коду company.lastIndexOf(‘e’).
розділити (підрядок)
Метод split розбиває заданий рядок на підрядок і повертає частини у вигляді масиву.
const statement = "Visit, the, site, techukraine.net";
console.log(statement.split(" "));
console.log(statement.split(", "));
Висновок
Це ще не кінець. Ознайомтеся з іншими методами рядків із документації. Можуть бути й інші методи, корисні в окремих випадках.
Шукайте та використовуйте їх у своєму конкретному випадку, якщо його тут немає в списку.
Щасливого кодування 🙂
Далі ознайомтеся з деякими популярними фреймворками JavaScript.