JS метод String.substr()


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

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

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

  1. Отримання підрядка:

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

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

  2. Використання без другого параметра:

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

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

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

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

Приклад з від'ємним значенням:

let text = "Hello, World!";
let endSubstr = text.substr(-6, 5);
// endSubstr: 'World'

Тут, substr(-6, 5) починає витягувати рядок з шостого символу з кінця рядка, що дозволяє зручно отримувати підрядки, починаючи з кінця.

автор: Bond

Порада

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

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

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

автор: Bond
Нотатка

String.prototype.substr() приймає від'ємні значення як стартову позицію. У цьому випадку підрахунок починається з кінця рядка. Наприклад, someString.substr(-4) поверне останні чотири символи з рядка.

автор: Bond

Синтаксис

substr(start)
substr(start, length)

Параметри

start

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

автор: Bond

length

Кількість символів, які потрібно витягнути. Якщо цей аргумент не вказаний або його значення перевищує кількість символів від початкової позиції до кінця рядка, повертається весь решту рядка.

автор: Bond

Повернення

string

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 4 12 4
Підтримка: мобільні переглядачі
Переглядач 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

Приклади

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

У цьому прикладі, користувачі можуть ввести рядок, вказати початковий індекс та довжину підрядка, який вони хочуть отримати. Натиснувши кнопку, вони отримають підрядок, який буде виведений у блоку .result. Це інтерактивний та зрозумілий спосіб демонструвати роботу методу substr().

автор: Bond

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

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

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

У цьому складнішому прикладі ми використовуємо String.prototype.substr() для обробки дати у вигляді рядка. Це корисно, коли нам потрібно отримати різні компоненти дати, такі як день, місяць або рік, з рядка дати.

let dateString = "2023-11-19";
let year = dateString.substr(0, 4); // Витягуємо рік
let month = dateString.substr(5, 2); // Витягуємо місяць
let day = dateString.substr(8, 2); // Витягуємо день

console.log(`Рік: ${year}, Місяць: ${month}, День: ${day}`); // Виводить: "Рік: 2023, Місяць: 11, День: 19"
автор: 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`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

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

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