如何在JavaScript模板字面量中递增变量而不输出其值？

你尝试在JavaScript模板字面量的map循环中递增count变量，用来生成Bootstrap Collapse所需的唯一ID，但count++被直接打印到输出字符串中，没有实现预期的递增效果。你的代码如下：

function outputFAQResults(results) {
    
    if(results.faqs) {
        const gridClass = results.faqs.length > 1 ? "grid-2" : "grid-1";
        let count = 1 // 想要在map循环中递增的变量

        return `
    <div data-result-type="faqs" class="accordion">
        <h2 class="grid-item-heading gold-line">FAQ's</h2>
        <div class="search-results-section">
            <ul class="${gridClass} found-results list-reset">${results.faqs.map((item) => `
                <li class="search-result search-result--faq" tabindex="0">
                    <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${count}" aria-expanded="false" aria-controls="faq-${count}">${item.question}</button></div>
                    <div id="faq-${count}" class="search-result__answer collapse">${item.answer}</div>
                </li>`${count++}).join("")}
            </ul>
        </div>
    </div>`} else {
        return "";
    }
}

问题原因 #

你把${count++}直接附加在模板字面量的末尾，这会将count递增后的结果插入到输出字符串中，所以才会出现“被打印”的情况。我们需要的是递增变量，但不把这个操作的结果输出到HTML里。

解决方案 #

方案1：先保存当前值再递增

在map回调中先保存count的当前值，再执行递增操作，模板里使用保存的当前值即可：

function outputFAQResults(results) {
    
    if(results.faqs) {
        const gridClass = results.faqs.length > 1 ? "grid-2" : "grid-1";
        let count = 1

        return `
    <div data-result-type="faqs" class="accordion">
        <h2 class="grid-item-heading gold-line">FAQ's</h2>
        <div class="search-results-section">
            <ul class="${gridClass} found-results list-reset">${results.faqs.map((item) => {
                // 保存当前count值，再递增
                const currentCount = count++;
                return `
                <li class="search-result search-result--faq" tabindex="0">
                    <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${currentCount}" aria-expanded="false" aria-controls="faq-${currentCount}">${item.question}</button></div>
                    <div id="faq-${currentCount}" class="search-result__answer collapse">${item.answer}</div>
                </li>`;
            }).join("")}
            </ul>
        </div>
    </div>`} else {
        return "";
    }
}

方案2：利用map的索引参数（更推荐）

map方法的回调函数本身提供了索引参数（从0开始），直接用index + 1就能生成从1开始的序列，不需要手动维护count变量，更简洁可靠：

function outputFAQResults(results) {
    
    if(results.faqs) {
        const gridClass = results.faqs.length > 1 ? "grid-2" : "grid-1";

        return `
    <div data-result-type="faqs" class="accordion">
        <h2 class="grid-item-heading gold-line">FAQ's</h2>
        <div class="search-results-section">
            <ul class="${gridClass} found-results list-reset">${results.faqs.map((item, index) => {
                const currentCount = index + 1;
                return `
                <li class="search-result search-result--faq" tabindex="0">
                    <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${currentCount}" aria-expanded="false" aria-controls="faq-${currentCount}">${item.question}</button></div>
                    <div id="faq-${currentCount}" class="search-result__answer collapse">${item.answer}</div>
                </li>`;
            }).join("")}
            </ul>
        </div>
    </div>`} else {
        return "";
    }
}

内容的提问来源于stack exchange，提问作者Sackadelic