Конкатенация строки JavaScript во время присвоения

Question

Я создаю набор кнопок, каждый из которых будет присвоен переменной. В моем цикле у меня есть некоторые идентификаторы, которые я хочу добавить к атрибуту каждой кнопки id:

var test = '<button id="myButton_" class="myButtonsClass" type="button">testButton</button>'; 

Я хочу, чтобы это выглядело как button id="myButton_123".

Answer 1

Вы можете использовать функцию replace:

var template = '<button id="myButton_#" class="myButtonsClass" type="button">testButton</button>'; 

for (var i=0; i<10, i++) { 
    console.log(template.replace('#',i)); 
} 

Answer 2

Избегайте длинные строки, и использовать методы, предоставляемые вам сам DOM. Создание элементов и манипулирования их содержание/атрибуты не должны быть трудными:

// This will hold our buttons, so we aren't thrashing the DOM 
var fragment = document.createDocumentFragment(); 

// Lets cycle over a collection of ids 
[ 23, 57, 92 ].forEach(function (id) { 

    // Create a button, and get ready to manipulate it 
    var button = document.createElement("button"); 

    // Set a few properties, and the content 
    button.id = "myButton_" + id; 
    button.textContent = "Test Button"; 
    button.className = "myButtonsClass"; 

    // Push this button into the fragment 
    fragment.appendChild(button);  

}); 

// Now we touch the DOM once by adding the fragment 
document.body.appendChild(fragment); 

В современных ES6 + средах, вы можете использовать шаблон буквенные строки для в situé интерполяции:

var id = "73868CB1848A216984DCA1B6B0EE37BC"; 
var button = `<button id='myButton${ id }'>Click Me</button>`; 

Сказав это, я все равно призываю вас разбить задачу на более мелкие, более потребляемые части и использовать DOM apis для создания элемента (ов).