Array.toString() в JavaScript — масив у рядок


Опис

Метод toString() дозволяє перетворити масив та його елементи у рядок. Коли масив потрібно відобразити у текстовому вигляді або коли на нього посилаються в текстовому контексті, JavaScript автоматично викликає метод toString().

Метод toString() для об'єкта Array перезаписує відповідний метод об'єкта Object. Всередині методу toString() масивів викликається метод join(), який об'єднує елементи масиву в єдиний рядок. Кожен елемент масиву у цьому рядку розділяється комами. У випадку, якщо метод join недоступний або не є функцією, використовується Object.prototype.toString, що призводить до результату [object Array].

const arr = [];
arr.join = 1; // перепризначаємо join як не-функцію
console.log(arr.toString()); // [object Array]

console.log(Array.prototype.toString.call({ join: () => 1 })); // 1

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

const arr = [];
arr.push(1, [3, arr, 4], 2);
console.log(arr.toString()); // 1,3,,4,2
автор: Bond

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

автор: NagarD

Порада

Зауважте, що метод toString() не змінює вихідний масив, а лише повертає рядок. Якщо ви хочете змінити масив на рядок без комами, ви можете використовувати метод join(). Наприклад, [1, 2, 3].join('-') поверне рядок '1-2-3'.

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

Якщо масив містить інші масиви або об'єкти, метод toString() викликається рекурсивно для кожного вкладеного елемента. Наприклад, [1, [2, 3], {name: 'John'}].toString() поверне рядок '1,2,3,[object Object]'.

автор: Bond

Синтаксис

toString()

Повернення

string

Рядок, що представляє елементи масиву.

автор: 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
1 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

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

Використання toString().

const array1 = [1, 2, "a", "1a"];

console.log(array1.toString()); // "1,2,a,1a"
автор: Bond

Використання toString() на розріджених масивах.

console.log([1, , 3].toString()); // '1,,3'
автор: Bond

Виклик toString() на не-масивних об'єктах.

console.log(Array.prototype.toString.call({ join: () => 1 }));
// 1; число
console.log(Array.prototype.toString.call({ join: () => undefined }));
// undefined
console.log(Array.prototype.toString.call({ join: "not function" }));
// "[object Object]"
автор: Bond

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

HTML

<header>
  <h2 class="title">Використання методу toString() з масивом рядків</h2>
  <p class="description">Демонстрація того, як метод toString() може використовуватись з масивом рядків.</p>
</header>
<main>
  <div class="result">
    <h3 class="result-title">Оброблювані дані:</h3>
    <pre id="data"></pre>
    <h3 class="result-title">Результат використання toString():</h3>
    <pre id="result"></pre>
  </div>
</main>

CSS

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);
}

.result-title {
  font-weight: bold;
  color: #333;
}

JS

function generateStringArray(n) {
  let arr = [];
  for (let i = 0; i < n; i++) {if (window.CP.shouldStopExecution(0)) break;
    arr.push('Рядок ' + (i + 1));
  }window.CP.exitedLoop(0);
  return arr;
}

let data = generateStringArray(4);

// Виводимо дані до обробки
document.getElementById('data').innerText = JSON.stringify(data, null, 2);

let result = data.toString();

// Виводимо результат
document.getElementById('result').innerText = result;
//# sourceURL=pen.js
автор: Bond

Що toString() робить із null, дірами, вкладеними масивами й об'єктами — і звідки береться [1,2] + [3] === "1,23".

const arr = [1, 2, 3];
console.log(arr.toString(), '' + arr, `${arr}`); // 1,2,3 1,2,3 1,2,3

// null, undefined і діри стають порожнім місцем — усі три однакові
console.log([1, null, 3].toString());      // 1,,3
console.log([1, undefined, 3].toString()); // 1,,3
console.log([1, , 3].toString());          // 1,,3

// вкладеності в рядку не видно
console.log([1, [2, 3]].toString());       // 1,2,3
console.log([1, 2, 3].toString());         // 1,2,3 — рядки однакові

// об'єкти перетворюються на [object Object]
console.log([{ n: 1 }].toString());        // [object Object]
console.log(JSON.stringify([{ n: 1 }]));   // [{"n":1}]

// звідси й дивна «арифметика» масивів
console.log([1, 2] + [3]);                 // 1,23
console.log([] == false);                  // true
автор: NagarD

Коментарі

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

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

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

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

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