JS метод String.substring()


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

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

Використання substring():

  1. Витягування підрядка:

    let text = "Hello, World!";
    let part = text.substring(7, 12);
    // part: 'World'
    

    Тут substring(7, 12) означає витягування підрядка з 7-го по 12-й символ (не включаючи 12-й).

  2. Витягування до кінця рядка:

    let text = "JavaScript";
    let sub = text.substring(4);
    // sub: 'Script'
    

    Якщо другий параметр не вказаний, substring() витягне підрядок до кінця рядка.

Особливості та практичне використання:

  • Перестановка індексів: Якщо другий індекс менший за перший, substring() переставить їх місцями.
  • Гнучкість у витягуванні даних: Цей метод важливий для вилучення частин тексту, особливо коли ми працюємо з рядками, що містять певні шаблони або формати.
  • Не змінює оригінальний рядок: Як і більшість методів рядків, substring() повертає новий рядок, не модифікуючи оригінальний.

Приклад з перестановкою індексів:

let text = "Hello, World!";
let segment = text.substring(12, 7);
// segment: 'World'

У цьому прикладі, хоча індекси вказані у незвичайному порядку (спочатку кінцевий, потім початковий), substring() коректно витягує підрядок 'World'. Ця особливість робить метод substring() більш гнучким і вибачає помилки при введенні індексів.

автор: Bond

Порада

Якщо перший індекс більший за другий, substring() автоматично їх обмінює. Таким чином, substring(10, 5) і substring(5, 10) дадуть однаковий результат.

автор: Bond
Порада

Якщо один із індексів є від'ємним або не визначений, він інтерпретується як 0. Це дуже зручно для випадків, коли потрібно взяти підрядок від початку рядка, не хвилюючись про від'ємні або неіснуючі значення.

автор: Bond
Порада

String.prototype.substring() ідеально підходить для створення легкочитаних витягів тексту, що може поліпшити читабельність та підтримку вашого коду. Використовуйте цей метод для чіткого визначення, які частини рядка вам потрібні, що робить ваш код більш інтуїтивно зрозумілим.

автор: Bond

Синтаксис

substring(indexStart)
substring(indexStart, indexEnd)

Параметри

indexStart

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

автор: Bond

indexEnd

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

автор: Bond

Повернення

string

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 3
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

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

У цьому прикладі використовується метод String.prototype.substring() для витягування підстроки з заданого рядка. Метод substring() приймає два аргументи: індекс початку та індекс кінця підстроки. Це особливо корисно, коли потрібно отримати певну частину рядка, наприклад, ім'я користувача з електронної адреси.

let email = "[email protected]";
let userName = email.substring(0, email.indexOf('@')); // Витягуємо ім'я користувача

console.log(userName); // Виводить: "example"
автор: Bond

У цьому складнішому прикладі використовується String.prototype.substring() для форматування дати, представленої у вигляді рядка. Це корисно, коли треба перетворити дату з одного формату в інший, наприклад, з "РРРРММДД" у "ДД/ММ/РРРР".

let dateString = "20231119"; // Дата у форматі "РРРРММДД"
let formattedDate = dateString.substring(6, 8) + "/" + dateString.substring(4, 6) + "/" + dateString.substring(0, 4);

console.log(formattedDate); // Виводить: "19/11/2023"
автор: Bond

У цьому прикладі користувачі можуть ввести рядок і вказати індекси для початку і кінця підстроки. Після натискання кнопки, результат, який є підрядком вказаного рядка, буде виведений у відповідному блоці .result. Це інтерактивний та зрозумілий спосіб демонструвати роботу методу substring().

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід