JS властивість String.prototype


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

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

Розглянемо приклад, де ми хочемо додати новий метод до всіх рядків:

String.prototype.sayHello = function() {
  return `Привіт, ${this}!`;
};

let myName = "Олександр";
console.log(myName.sayHello()); // Виведе: "Привіт, Олександр!"

Тут ми додали метод sayHello до String.prototype, який дозволяє будь-якому рядку вивести привітання.

Розширення функціональності рядків

String.prototype може бути корисним для додавання специфічних функцій, яких немає в стандартному API JavaScript. Наприклад, якщо вам часто потрібно перевіряти, чи рядок закінчується певним словом, можна додати таку функцію:

String.prototype.endsWithWord = function(word) {
  const words = this.split(' ');
  return words[words.length - 1] === word;
};

let sentence = "Життя прекрасне";
console.log(sentence.endsWithWord("прекрасне")); // Виведе: true

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

автор: Bond

Нотатка

Методи indexOf(), lastIndexOf(), includes(), startsWith(), endsWith() та replace() дозволяють легко знаходити підрядки, перевіряти наявність певних символів або здійснювати заміну частин рядка. Це особливо корисно для валідації та форматування тексту.

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

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

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

Методи split() та join() є незамінними для розділення рядків на масиви або об'єднання елементів масиву в рядок. Вони корисні для маніпуляцій зі списками та текстовими даними, наприклад, при аналізі CSV файлів чи формуванні динамічних рядків.

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

Доступ до окремих символів рядка можна отримати за допомогою методу charAt() або просто використовуючи квадратні дужки []. Це корисно для перебору рядків, наприклад, при перевірці парольної політики або при аналізі текстових даних.

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

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

автор: Bond

Синтаксис

String

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE
1 1 1 3 12
Підтримка: мобільні переглядачі
Переглядач 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.length, щоб визначити довжину рядка. Це одна з найбільш фундаментальних і важливих властивостей, що використовується у JavaScript для роботи з текстом. Властивість length повертає кількість символів у рядку, що є корисним при перевірці вводу даних або обробці тексту.

// Вихідний рядок
let myString = "Привіт, світе!";

// Визначаємо довжину рядка
let lengthOfString = myString.length;

console.log(lengthOfString); // Виводить: 14
автор: Bond

У цьому складнішому прикладі ми використовуємо метод String.prototype у комбінації з методами JSON.parse() і JSON.stringify(). Це демонструє, як можна перетворювати рядок, який містить JSON, у JavaScript-об'єкт і назад. Це важливо для роботи з даними, отриманими з API або збереженими у форматі JSON.

// Рядок, який містить JSON
let jsonString = '{"name":"Іван", "age":30}';

// Перетворюємо JSON-рядок у об'єкт
let userObject = JSON.parse(jsonString);

// Змінюємо вік користувача
userObject.age = 31;

// Перетворюємо об'єкт назад у JSON-рядок
let updatedJsonString = JSON.stringify(userObject);

console.log(updatedJsonString); // Виводить: '{"name":"Іван","age":31}'
автор: Bond

У цьому прикладі ми перевизначимо метод String.prototype.concat, який зазвичай використовується для об'єднання рядків. Ми модифікуємо його таким чином, щоб він також додавав роздільний символ між рядками.

Це приклад того, як можна змінити стандартну поведінку вбудованих методів у JavaScript, але слід зазначити, що такі зміни можуть впливати на інші частини коду, які використовують ці методи, тому вони мають застосовуватися обережно.

// Збереження оригінального методу concat
String.prototype.originalConcat = String.prototype.concat;

// Перевизначення методу concat
String.prototype.concat = function(...strings) {
  let result = this;
  strings.forEach(string => {
    result = result.originalConcat("-", string);
  });
  return result;
};

// Приклад використання перевизначеного методу
let hello = "Привіт";
let world = "Світ";
let message = hello.concat(world);

console.log(message); // Виводить: "Привіт-Світ"
автор: 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`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

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

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