Блог

Есть ли способ объединить строки, значения переменных и новые строки в javascript?

Мой код:

 var variab = "Make:"  make n 
        "Model:"   model  n 
        "Date taken: "   dateTime  n 
        "File name:"   fileName ;
variab = variab.replace(/n/g, '<br>');
        document.getElementById('exifid').innerHTML = variab;});
  

make, model, DateTime и fileName — это переменные, которые возвращают определенные значения, и я хочу, чтобы они отображались в форме списка в моем div.

У вас почти получилось:

 var variab = "Make:"   make   "n"  
    "Model:"   model   "n"  
    "Date taken: "   dateTime   "n"  
    "File name:"   fileName ;

variab = variab.replace(/n/g, '<br>');
document.getElementById('exifid').innerHTML = variab;
  

Вы также можете поместить каждую строку в массив и использовать .join("<br>") для экономии ввода.

Зачем использовать replace?

 var variab = "Make:"  make   "<br>"  
"Model:"   model    "<br>"  
"Date taken: "   dateTime    "<br>"  
"File name:"   fileName ;
document.getElementById('exifid').innerHTML = variab;
  

Вы могли бы поместить каждый элемент в массив, а затем объединить их.

 var array = [
    "Make:"  make,
    "Model:"   model,
    "Date taken: "   dateTime,
    "File name:"   fileName
];
document.getElementById('exifid').innerHTML = array.join('<br/>');
  

Для большей удобочитаемости я бы сделал это:

 var variab = [
    "Make:"   make,
    "Model:"   model, 
    "Date taken: "   dateTime,
    "File name:"   fileName
].join("<br />");
  

Вы также можете добавлять новые строки в свои поля таким образом.

Если только ваши потребности не станут более сложными. В этом случае я бы использовал фреймворк шаблонов.

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

 var variab = {
    "Make": "Audi",
    "Model": "A3",
    "Date Taken": 2006,
    "File Name": "audia3.doc"
}

var string = "";

for (var detail_type in variab){
    var detail_data = variab[detail_type];
    string  = detail_type   ": "   detail_data   "<br/>"
}

document.getElementById('exifid').innerHTML = variab;