JavaScript Рядкові методи
Рядкові методи допомагають працювати з рядками.
Рядкові методи та властивості
Примітивні значення, такі як "John Doe", не можуть мати властивостей або методів (оскільки вони не є об’єктами).
Але з JavaScript методи та властивості також доступні для примітивних значень, оскільки JavaScript розглядає примітивні значення як об’єкти під час виконання методів і властивостей.
JavaScript Метод length
Властивість length повертає довжину рядка:
Вилучення частин рядка
Існує 3 методи вилучення частини рядка:
slice(start, end)substring(start, end)substr(start, length)
JavaScript Метод slice()
slice() витягує частину рядка та повертає витягнуту частину в новому рядку.
Метод приймає 2 параметри: початкову позицію та кінцеву позицію (кінець не включається).
Приклад
Відріжте частину рядка від позиції 7 до позиції 13 (13 не включається):
let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);
Спробуйте самі »
Примітка
JavaScript підраховує позиції з нуля.
Перша позиція – 0.
Друга позиція – 1.
Якщо параметр від’ємний, позиція відраховується з кінця рядка.
Цей приклад вирізає частину рядка з позиції -12 до позиції -6:
Якщо ви опустите другий параметр, метод виділить решту рядка:
або, рахуючи з кінця:
JavaScript Метод substring()
substring() схожий на slice().
Різниця полягає в тому, що початкові та кінцеві значення, менші за 0, розглядаються як 0 в substring().
Якщо ви опустите другий параметр, substring() виділить решту рядка.
JavaScript Метод substr()
substr() схожий на slice().
Різниця полягає в тому, що другий параметр визначає довжину витягнутої частини.
Якщо ви опустите другий параметр, substr() виділить решту рядка.
Якщо перший параметр від’ємний, позиція відраховується з кінця рядка.
Заміна вмісту рядка
Метод replace() замінює вказане значення іншим значенням у рядку:
Приклад
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
Спробуйте самі »
Примітка
Метод replace() не змінює рядок, який він викликає.
Метод replace() повертає новий рядок.
Метод replace() замінює лише перший збіг.
Якщо ви хочете замінити всі збіги, використовуйте регулярний вираз зі встановленим прапорцем /g. Дивіться приклади нижче.
За умовчанням метод replace() замінює лише перший збіг:
Приклад
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
Спробуйте самі »
За замовчуванням метод replace() чутливий до регістру. Написання MICROSOFT (у верхньому регістрі) не працюватиме:
Приклад
let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");
Спробуйте самі »
Щоб замінити нечутливий до регістру, використовуйте регулярний вираз із прапорцем /i (нечутливий):
Приклад
let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");
Спробуйте самі »
Примітка
Регулярні вирази записуються без лапок.
Щоб замінити всі збіги, використовуйте регулярний вираз із прапорцем /g (глобальний збіг):
Приклад
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");
Спробуйте самі »
Примітка
Ви дізнаєтеся більше про регулярні вирази в розділі JavaScript Регулярні вирази на нашому сайті W3Schools українською.
Перетворення у верхній і нижній регістри
Рядок перетворюється на верхній регістр за допомогою toUpperCase():
Рядок перетворюється на нижній регістр за допомогою toLowerCase():
JavaScript Метод toUpperCase()
JavaScript Метод toLowerCase()
Приклад
let text1 = "Hello World!"; // Рядок
let text2 = text1.toLowerCase(); // text2 це text1, перетворений на нижній регістр
Спробуйте самі »
JavaScript Метод concat()
concat() з’єднує два або більше рядків (конкатенація):
Приклад
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
Спробуйте самі »
Метод concat() можна використовувати замість оператора "плюс". Ці два рядки роблять те саме:
Приклад
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");
Примітка
Усі рядкові методи повертають новий рядок. Вони не змінюють оригінальний рядок.
Офіційно сказано:
Рядки незмінні: рядки не можна змінювати, лише замінювати.
JavaScript Метод trim()
Метод trim() видаляє пробіли з обох сторін рядка:
JavaScript Відступ рядка (padding)
ECMAScript 2017 додав два методи рядка: padStart() і padEnd() для підтримки відступів на початку та в кінець рядка.
JavaScript Метод padStart()
Метод padStart() доповнює рядок іншим рядком:
Примітка
Метод padStart() є методом рядка.
Щоб додати число, спочатку треба перетворити число на рядок.
Див. приклад нижче.
Підтримка браузерами
padStart() є функцією ECMAScript 2017.
Він підтримується всіма сучасними браузерами:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
padStart() не підтримується в Internet Explorer.
JavaScript Метод padEnd()
Метод padEnd() доповнює рядок іншим рядком:
Примітка
Метод padEnd() є методом рядка.
Щоб додати число, спочатку треба перетворити число на рядок.
Див. приклад нижче.
Підтримка браузерами
padEnd() є функцією ECMAScript 2017.
Він підтримується всіма сучасними браузерами:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
padEnd() не підтримується в Internet Explorer.
Вилучення символів рядка
Існує 3 методи вилучення символів рядка:
charAt(position)charCodeAt(position)- Властивість access [ ]
JavaScript Метод charAt()
Метод charAt() повертає символ за вказаним індексом (позицією) у рядку:
JavaScript Метод charCodeAt()
Метод charCodeAt() повертає Юнікод символу за вказаним індексом у рядку:
Метод повертає код UTF-16 (ціле число від 0 до 65535).
Властивість Access
ECMAScript 5 (2009) дозволяє доступ до властивості [ ] для рядків:
Примітка
Властивість access може бути дещо непередбачуваною:
- Це робить рядки схожими на масиви (але ними не є)
- Якщо символ не знайдено, [ ] повертає undefined, тоді як charAt() повертає порожній рядок.
- Лише для читання. str[0] = "A" не дає помилок (але не працює!)
Перетворення рядка в масив
Якщо ви хочете працювати з рядком як масивом, ви можете перетворити його на масив.
JavaScript Метод split()
Рядок можна перетворити на масив за допомогою методу split():
Приклад
text.split(",") // Розділити комами
text.split(" ") // Розділити пробілами
text.split("|") // Розділити трубами (вертикальними рисками)
Спробуйте самі »
Якщо роздільник опущено, повернутий масив міститиме весь рядок в індексі [0].
Якщо роздільником є "", повернутий масив буде масивом із окремих символів:
Повний довідник рядків
Щоб отримати повну довідкову інформацію про рядки, перейдіть до нашого:
Повний довідник JavaScript рядків.
Довідник містить описи та приклади всіх властивостей і методів рядків.
