String.slice() в JavaScript — вирізати частину рядка

Загальний опис

Метод String.prototype.slice() - це зручний спосіб для вирізання підрядка з існуючого рядка. Він дозволяє вказати початкову та кінцеву позиції для вирізання, ефективно використовуючи індекси символів у рядку. Цей метод є корисним для обробки рядків, наприклад, при зміні форматування даних, видаленні небажаних символів або просто для отримання специфічної частини рядка.

slice() можна використовувати для отримання частини рядка, вказавши початковий індекс (включно) і кінцевий індекс (не включно). Якщо кінцевий індекс не вказаний, метод виріже усе до кінця рядка. Наприклад:

let text = "Привіт, світ!";
let part = text.slice(0, 6);
console.log(part); // Виведе "Привіт"

Якщо вказати від'ємні індекси, slice() рахуватиме від кінця рядка:

let part = text.slice(-5, -1);
console.log(part); // Виведе "світ"

Цей метод можна використовувати для створення функцій, які динамічно обробляють текст. Наприклад, функція для видалення останнього символу з рядка:

function removeLastChar(str) {
  return str.slice(0, -1);
}
console.log(removeLastChar("Привіт!")); // Виведе "Привіт"

Головна особливість методу slice() полягає в тому, що він не змінює оригінальний рядок, а повертає новий підрядок. Це робить slice() безпечним для використання, оскільки оригінальний рядок залишається незмінним. Також варто зазначити, що slice() зручний у використанні, оскільки легко враховує від'ємні індекси, дозволяючи гнучко вирізати підрядки з кінця рядка.

Таким чином, String.prototype.slice() є надзвичайно корисним для різноманітних операцій з рядками, пропонуючи як простоту використання, так і гнучкість для більш складних завдань.

правити

Порада

Метод дозволяє використовувати від'ємні індекси, які відлічуються з кінця рядка. Наприклад, slice(-3) поверне останні три символи рядка. Ця функція може бути корисною для вилучення певних частин рядка, не знаючи їх точного розташування.

автор: Bond правити

Порада

Пам'ятайте, що при використанні slice(), якщо початковий індекс більший за довжину рядка, метод поверне порожній рядок. Також, якщо кінцевий індекс більший за довжину рядка, метод виділить рядок до кінця.

автор: Bond правити

Порада

Важливо пам'ятати, що slice() не змінює оригінальний рядок, а створює новий. Тому при роботі з великими рядками варто враховувати потенційне споживання пам'яті при створенні нових рядків.

автор: Bond правити

Нотатка

Метод String.prototype.slice() ідеально підходить для виділення підрядків із рядка. Це корисно, коли вам потрібно обрізати рядок, наприклад, для відображення короткого опису, що обмежений певною кількістю символів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

slice(indexStart)
slice(indexStart, indexEnd)

Параметри

indexStart

Індекс першого символу, який включається у повернений підрядок. Цей параметр визначає, звідки починається вилучення символів у рядку.

автор: Bond

правити

indexEnd

Індекс першого символу, який виключається з поверненого підрядка. Якщо цей параметр опущений, метод slice() виділяє символи до кінця рядка.

автор: Bond

правити

Повернення

string

Повертає новий рядок, який містить вилучену частину початкового рядка. Виділення виконується згідно з заданими індексами indexStart та indexEnd. Якщо indexEnd не вказано, метод виділяє всі символи від indexStart до кінця рядка. Важливо, що оригінальний рядок залишається незмінним, а результатом є цілком новий рядок.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

// Визначення вихідного рядка
let email = "[email protected]";

// Вирізання домену з електронної адреси
let domain = email.slice(email.lastIndexOf("@") + 1);

console.log(domain);
// Виведе: "example.com"

<header>
  <h2 class="title">String.prototype.slice()</h2>
  <p class="description">Вирізає підрядок з основного рядка, використовуючи початковий та кінцевий індекси.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="inputText" placeholder="Введіть рядок" />
    <input type="number" id="startIndex" placeholder="Початковий індекс" />
    <input type="number" id="endIndex" placeholder="Кінцевий індекс" />
    <button onclick="sliceText()">Вирізати</button>
    <p id="output">Вирізаний рядок: </p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input[type="text"], input[type="number"] {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#output {
  margin-top: 15px;
  font-weight: bold;
}

function sliceText() {
  var text = document.getElementById('inputText').value;
  var start = parseInt(document.getElementById('startIndex').value);
  var end = parseInt(document.getElementById('endIndex').value);
  var slicedText = text.slice(start, end);
  document.getElementById('output').innerHTML = 'Вирізаний рядок: ' + slicedText;
}
//# sourceURL=pen.js

// Визначення вихідного рядка
let sentence = "Сьогодні чудовий день для програмування.";

// Вирізання слова "чудовий" з рядка (індекси 9-16)
let word = sentence.slice(9, 16);

console.log(word);
// Виведе: "чудовий"