Метод slice JS — це один із найзручніших інструментів JavaScript для отримання частини рядка або масиву без зміни початкових даних. Якщо пояснити зовсім просто, він працює як акуратний різак: ви берете потрібний фрагмент, а оригінал лишається недоторканим. Саме тому slice() часто з’являється у фронтенд-розробці, обробці тексту, роботі зі списками товарів, пагінацією, фільтрацією даних та підготовкою інформації для інтерфейсу. Для новачка це базовий метод, а для досвідченого розробника — безпечний і передбачуваний спосіб швидко отримати потрібний сегмент даних.
Що таке slice() у JavaScript і для чого він потрібен
slice() — це вбудований метод JavaScript, який повертає новий фрагмент рядка або масиву, обраний за початковим і кінцевим індексом. Його головна перевага полягає в тому, що він не змінює оригінальний рядок або масив, а створює нове значення на основі заданого діапазону.
У JavaScript цей метод використовується у двох дуже поширених сценаріях:
- Коли потрібно вирізати частину тексту, наприклад слово, код країни, префікс або домен.
- Коли потрібно отримати частину масиву, наприклад перші 10 елементів для сторінки списку або підмножину даних для візуалізації.
Найкраще уявити slice() як лінійку з двома позначками: перша вказує, звідки почати, а друга — де зупинитися. Причому друга межа не включається. Це нагадує нарізання батона: ви не берете “до п’ятого шматка включно”, а ріжете до межі перед ним.
| Властивість | slice() для рядка | slice() для масиву |
|---|---|---|
| Повертає | Новий рядок | Новий масив |
| Змінює оригінал | Ні | Ні |
| Підтримує від’ємні індекси | Так | Так |
| Кінець діапазону включається | Ні | Ні |
Як працює slice JS: синтаксис, параметри та логіка індексів
Синтаксис slice() складається з двох параметрів — початкового та кінцевого індексу — і повертає фрагмент від стартової позиції до позиції перед кінцевою. Це означає, що метод читає діапазон за принципом “від і до, не включаючи останню межу”.
Базовий синтаксис
array.slice(start, end)
string.slice(start, end)Параметри працюють так:
- start — індекс, з якого починається вирізання.
- end — індекс, перед яким вирізання закінчується.
Якщо end не вказано, метод бере все від start до кінця.
Що означає індексація на практиці
У JavaScript індекси починаються з нуля. Це правило часто збиває з пантелику на старті, але логіка швидко стає звичною: перший елемент має індекс 0, другий — 1, третій — 2.
const text = "JavaScript";
console.log(text.slice(0, 4)); // "Java"
console.log(text.slice(4)); // "Script"У першому прикладі беруться символи з індексу 0 до індексу 4, але символ із позицією 4 не входить у результат.
Від’ємні індекси
Від’ємні індекси в slice() означають відлік із кінця рядка або масиву. Це дуже зручно, коли потрібно взяти останні символи, останній елемент або “хвіст” списку.
const fileName = "document.pdf";
console.log(fileName.slice(-4)); // ".pdf"Тут -4 означає: почати за 4 символи до кінця.
У практиці я майже завжди рекомендую новачкам спочатку проговорювати slice() словами: “візьми від цієї позиції до цієї, але не включай останню”. Після кількох таких повторів плутанина з межами зникає.
Як вирізати частину рядка за допомогою slice()
Для рядка slice() повертає новий текстовий фрагмент на основі вказаних індексів і не змінює вихідне значення. Це особливо корисно під час форматування даних, скорочення текстів, обробки URL, номерів, кодів і дат.
Приклади для рядків
const str = "frontend";
console.log(str.slice(0, 5)); // "front"
console.log(str.slice(5)); // "end"
console.log(str.slice(-3)); // "end"Корисна особливість рядків у JavaScript полягає в тому, що вони є незмінними. Це означає, що жоден виклик slice() не пошкодить початкове значення.
Практичні сценарії
- Обрізання префікса
const phone = "+380671234567";
const localPart = phone.slice(3);
console.log(localPart); // "671234567"- Отримання розширення файлу
const image = "photo.jpeg";
const extension = image.slice(-5);
console.log(extension); // ".jpeg"- Створення короткого прев’ю тексту
const description = "Метод slice допомагає зручно працювати з рядками та масивами.";
const preview = description.slice(0, 30) + "...";
console.log(preview);У реальних інтерфейсах така операція часто використовується в картках товарів, списках новин, блогових прев’ю та таблицях з обмеженим простором.
Є й практичне спостереження: у формах, де користувачі копіюють номери замовлень, токени чи артикул, розробники часто показують лише початок і кінець рядка, а середину приховують. Наприклад, ABCD...7890. Саме slice() дозволяє зробити це швидко й читабельно без складної логіки.
Як вирізати частину масиву через slice()
Для масиву slice() створює новий масив із вибраних елементів за діапазоном індексів, не змінюючи вихідний масив. Це дає безпечний спосіб працювати з копіями даних та будувати інтерфейси без побічних ефектів.
Базові приклади для масивів
const numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(1, 3)); // [20, 30]
console.log(numbers.slice(2)); // [30, 40, 50]
console.log(numbers.slice(-2)); // [40, 50]Де це застосовується найчастіше
- пагінація списків;
- відображення перших N елементів;
- копіювання масиву перед обробкою;
- виділення частини даних для графіка або таблиці;
- отримання “останніх дій” або “останніх повідомлень”.
Приклад пагінації
const products = ["Ноутбук", "Мишка", "Клавіатура", "Монітор", "Навушники", "Вебкамера"];
const perPage = 2;
const page = 2;
const start = (page - 1) * perPage;
const end = start + perPage;
const visibleProducts = products.slice(start, end);
console.log(visibleProducts); // ["Клавіатура", "Монітор"]Саме так часто формується набір елементів для конкретної сторінки каталогу.
Копія масиву через slice()
Виклик slice() без параметрів повертає поверхневу копію масиву. Це один із найстаріших і найвідоміших прийомів у JavaScript.
const original = [1, 2, 3];
const copy = original.slice();
console.log(copy); // [1, 2, 3]Важливо розуміти, що це поверхнева копія. Якщо всередині масиву є об’єкти, вкладені структури не дублюються повністю.
Slice у JavaScript для рядків і масивів: ключові відмінності
Метод slice() має однакову логіку для рядків і масивів, але відрізняється типом результату та сценаріями використання. Тобто принцип меж однаковий, проте повернене значення буде або рядком, або масивом.
| Критерій | Рядок | Масив |
|---|---|---|
| Тип результату | Рядок | Масив |
| Типове використання | Обрізання тексту, кодів, URL | Пагінація, підмножини даних, копіювання |
| Можливість копії без параметрів | Повертає той самий текст | Створює новий масив |
| Робота з елементами | Символи | Елементи будь-якого типу |
Із психологічної точки зору людям легше сприймати slice() на масивах, бо елементи списку видно виразніше, ніж позиції символів у рядку. Саме тому під час навчання часто починають із масивів, а вже потім переходять до тексту.
Поширені помилки під час роботи з slice()
Найчастіші помилки зі slice() пов’язані з неправильним розумінням кінцевого індексу, від’ємних значень і очікуванням, що метод змінить оригінальні дані. У більшості випадків проблема не в методі, а в тому, як розробник читає межі діапазону.
1. Очікування, що end включається
const letters = ["a", "b", "c", "d"];
console.log(letters.slice(1, 3)); // ["b", "c"]Елемент із індексом 3 не потрапить у результат.
2. Плутанина між slice() і splice()
slice() не змінює масив, а splice() змінює. Це одна з найпоширеніших помилок у JavaScript.
const arr = [1, 2, 3, 4];
const part = arr.slice(1, 3);
console.log(part); // [2, 3]
console.log(arr); // [1, 2, 3, 4]3. Невірне використання від’ємних індексів
const word = "developer";
console.log(word.slice(-5, -2)); // "ope"Тут обидва індекси відраховуються від кінця. Якщо не намалювати подумки шкалу позицій, легко помилитися.
4. Спроба зробити глибоку копію масиву
Якщо масив містить об’єкти, slice() не створює повноцінної незалежної копії вкладених даних.
const users = [{ name: "Ірина" }, { name: "Олег" }];
const copy = users.slice();
copy[0].name = "Анна";
console.log(users[0].name); // "Анна"Я не раз бачив, як помилка виникала не в логіці відбору, а в самовпевненості: розробник думав, що “десь тут точно включно”. Якщо є сумнів, перевірте індекси на простому прикладі з 4–5 елементів — це економить більше часу, ніж здається.
Slice(), substring() і splice(): у чому різниця
Методи slice(), substring() і splice() вирішують схожі на вигляд задачі, але працюють по-різному: slice() повертає фрагмент, substring() працює лише з рядками, а splice() змінює масив. Розуміння цієї різниці позбавляє великої частини помилок у коді.
| Метод | Працює з | Змінює оригінал | Підтримка від’ємних індексів |
|---|---|---|---|
| slice() | Рядки, масиви | Ні | Так |
| substring() | Рядки | Ні | Ні |
| splice() | Масиви | Так | Так |
Приклад різниці між slice() і splice()
const data = [1, 2, 3, 4, 5];
const sliced = data.slice(1, 3);
console.log(sliced); // [2, 3]
console.log(data); // [1, 2, 3, 4, 5]
const spliced = data.splice(1, 2);
console.log(spliced); // [2, 3]
console.log(data); // [1, 4, 5]На практиці правило дуже просте:
- Хочете отримати копію частини — використовуйте
slice(). - Хочете вирізати з оригіналу — використовуйте
splice(). - Працюєте лише з рядком і без від’ємних індексів — можливий варіант
substring(), алеslice()зазвичай передбачуваніший.
Практичні приклади використання slice() у реальному коді
У реальному коді slice() найчастіше застосовують для пагінації, скорочення тексту, обробки файлів, маскування конфіденційних даних та отримання останніх елементів списку. Саме ці сценарії найкраще показують, чому метод вважається базовим і універсальним.
Маскування картки або рахунку
const cardNumber = "1234567812345678";
const masked = "**** **** **** " + cardNumber.slice(-4);
console.log(masked);Останні повідомлення в чаті
const messages = ["Привіт", "Як справи?", "Надішли файл", "Дякую", "До зв'язку"];
const recent = messages.slice(-3);
console.log(recent); // ["Надішли файл", "Дякую", "До зв'язку"]Отримання домену верхнього рівня
const domain = "example.com";
console.log(domain.slice(-4)); // ".com"Розбиття великого списку на видимий блок
const items = Array.from({ length: 100 }, (_, i) => i + 1);
const visible = items.slice(20, 30);
console.log(visible);Згідно з опитуванням Stack Overflow Developer Survey 2024, JavaScript залишається найуживанішою мовою програмування серед розробників. На практиці це означає, що такі базові методи, як slice(), входять у щоденний інструментарій величезної кількості команд — від невеликих продуктових студій до великих сервісів із високим навантаженням.
Ще один приклад із реальної розробки: коли інтерфейс починає “гальмувати” не через сам slice(), а через зайві перерендери, розробники часто залишають логіку відбору елементів через slice(), але переносять її в мемоізовані обчислення або селектори стану. Тобто проблема рідко в методі — частіше в архітектурі компонента.
Кращі поради для безпечного та читабельного використання slice()
Найкраща практика для slice() — явно розуміти межі, називати змінні за змістом і використовувати метод там, де важлива незмінність даних. Це робить код простішим для підтримки та знижує ризик логічних помилок.
Рекомендації
- Називайте межі зрозуміло:
startIndex,endIndex,visibleItems. - Перевіряйте крайні випадки: порожні масиви, короткі рядки, від’ємні значення.
- Не плутайте з mutate-методами: якщо потрібно не змінювати дані,
slice()— хороший вибір. - Використовуйте від’ємні індекси там, де це покращує читабельність: наприклад, для останніх 4 символів.
- Тестуйте межі на коротких прикладах, якщо логіка нетривіальна.
Міні-шпаргалка
str.slice(0, 3) // з 0 до 3 не включно
str.slice(3) // з 3 до кінця
str.slice(-3) // останні 3 символи
arr.slice(0, 2) // перші 2 елементи
arr.slice(-2) // останні 2 елементи
arr.slice() // копія масивуЗ наукового погляду наш мозок краще обробляє шаблони, які повторюються без винятків. Саме тому slice() так добре “приживається” в роботі: одне правило меж застосовується і до масивів, і до рядків, що знижує когнітивне навантаження під час читання коду.
Висновок
slice() у JavaScript — це надійний метод для отримання частини рядка або масиву без зміни оригінальних даних. Він працює за простою логікою: бере фрагмент від початкового індексу до кінцевого, не включаючи останню межу. Саме ця передбачуваність робить його одним із найкорисніших інструментів у щоденному програмуванні.
У статті ми розібрали, як slice() працює з рядками й масивами, чим він відрізняється від splice() і substring(), як використовувати від’ємні індекси, де найчастіше трапляються помилки та які практики роблять код читабельнішим. Якщо коротко: коли потрібно акуратно вирізати фрагмент — тексту чи списку — slice() майже завжди буде правильним вибором.
Чим краще ви розумієте межі індексів, тим упевненіше пишете чистий, безпечний і зрозумілий JavaScript-код. І саме slice() — один із тих методів, з яких починається це відчуття контролю над даними.