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
- Порада
-
Зауважте, що метод
автор: BondtoString()не змінює вихідний масив, а лише повертає рядок. Якщо ви хочете змінити масив на рядок без комами, ви можете використовувати методjoin(). Наприклад,[1, 2, 3].join('-')поверне рядок'1-2-3'. - Нотатка
-
Якщо масив містить інші масиви або об'єкти, метод
автор: BondtoString()викликається рекурсивно для кожного вкладеного елемента. Наприклад,[1, [2, 3], {name: 'John'}].toString()поверне рядок'1,2,3,[object Object]'.
Синтаксис
toString()
Повернення
string-
Рядок, що представляє елементи масиву.
автор: Bond
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 4 |
| Переглядач | ||||
|---|---|---|---|---|
| 1 | 18 | 4 | 1 |
| Переглядач | ||
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Використання toString().
const array1 = [1, 2, "a", "1a"];
console.log(array1.toString()); // "1,2,a,1a"
Використання toString() на розріджених масивах.
console.log([1, , 3].toString()); // '1,,3'
Виклик 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]"
Цей приклад показує, як метод 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
Що 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
Коментарі
Коментарів ще немає — будьте першим!