Массив, преобразующий в строку

Question

У меня есть следующий код, который возвращает массив:

const authorsName = [];
this.props.authors.map((e) => authorsName.push(e.name + ' ' + e.surname));
console.log(authorsName)
// ["Jonh Snow", "Jonh Rain"]

Но когда я пытаюсь отправить этот массив, используя следующий код:

const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = `window.customConfig.push({
   page_type: "article",
   article_authors: "${authorsName}"
})`;

массив authorsName превращается в следующую строку:

article_authors: "Jonh Snow,Jonh Rain",

Я не понимаю, почему это происходит. Подскажите пожалуйста, в чем проблема. заранее спасибо.

Answer 1

Прежде всего, использование Array.map () таким способом работает, но это не совсем правильно.Помните, что .map() возвращает новый массив, в котором каждый элемент каким-то образом получен из исходного, и не изменяет исходный массив.Так что будет лучше, если вы сделаете что-то вроде следующего:

const authorsName = this.props.authors.map(e => e.name + ' ' + e.surname);

Другой вариант, чтобы код оставался более похожим на тот, который вы даете, - это использовать Array.forEach () следующим образом:

const authorsName = [];
this.props.authors.forEach(e => authorsName.push(e.name + ' ' + e.surname));

Теперь в вашем следующем коде:

s.innerHTML = `window.customConfig.push({
    page_type: "article",
    article_authors: "${authorsName}"
})`;

массив authorsName приведен к строке с использованием Array.toString () метод и MDN говорит следующее об этом:

Для объектов Array метод toString присоединяет массив, а возвращает одну строку, содержащую каждый элемент массива, разделенный запятыми.JavaScript вызывает метод toString автоматически , когда массив должен быть представлен в виде текстового значения или когда массив упоминается в конкатенации строк.

Итак, вместо этого вам нужно использовать JSON.stringify () для преобразования массива в JSON его представление.

s.innerHTML = `window.customConfig.push({
    page_type: "article",
    article_authors: "${JSON.stringify(authorsName)}"
})`;

Вы можете проверить разницу между использованием toString() и JSON.stringify() в следующем примере:

let arr = [1,2,3];

console.log("With toString() =>", arr.toString());
console.log("With JSON.stringify() =>", JSON.stringify(arr));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Answer 2

Когда вы включаете объект в строку, вызывается метод toString для создания из него строки. Метод toString в массиве запятой объединяет содержимое массива.

console.log([1,2,3,4].toString());

Если вам нужен другой формат, вы можете вызвать join для массива, чтобы объединить элементы с другой последовательностью.

console.log([1,2,3,4].join(', '));

console.log([1,2,3,4].join(' / '));

console.log([1,2,3,4].join(' - '));

Answer 3

article_authors интерполируется в строку, даже если это массив.

Если вы хотите, чтобы строка была в вашем первом фрагменте, попробуйте вместо этого:

const authors = [
{name: "Jonh",
 surname: "Snow"},
 {name: "Jonh",
 surname: "Rain"}
]
const authorsName = [];
const output = authors.map((e)=> authorsName.push(e.name + ' ' + e.surname));
console.log(authorsName)
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = `
   window.customConfig.push({
   page_type: "article",
   article_authors: "${JSON.stringify(authorsName)}"
   })
               `;

console.log(s.innerHTML)