How do I invoke my lang key using Handlebars JS inside a Javascript template literal

I’m trying to invoke my lang files (i.e. en.json, es.json, etc.) within a Javascript template literal however, when I call upon the lang file using Handlebars, it renders the lang call as a string instead of converting it into the text in my lang files. How do I change my code to make it pull from the lang files instead? Currently it is displaying the button with {{ lang product.quick_view }} as plain text.

Here is the HTML:

        <div class="quiz">
            <div id="quiz-container">
                <div id="question-container" class="question"></div>
                <ul id="options-container" class="productGrid"></ul>
            </div>
            <ul id="result-container" class="result">
            </ul>
        </div>
    <script src="{{cdn 'assets/js/autoselect-assist.js'}}"></script>

And here is my Javascript:

function displayResults() {
    questionContainer.textContent = "Your recommended product(s):";
    optionsContainer.innerHTML = "";
    
    if (filteredProducts.length > 0) {
        filteredProducts.forEach(result => {
            const productElement = document.createElement("li");
            productElement.classList.add("product");
            productElement.innerHTML += `
                <article class="card" data-event-type="list" data-name="${result.name} data-product-category="" data-product-brand="${result.brand} data-product-price="${result.price}>
                    <figure class="card-figure">
                        <a href="${result.url}" class="card-figure__link" target="_blank" aria-label="${result.name}, ${result.price}" data-event-type="product-click">
                            <div class="card-img-container">
                                <img src="${result.img}" class="card-image lazyautosizes ls-is-cached lazyloaded" alt="${result.name}" title="${result.name}" data-sizes="auto" srcset="${result.img} data-srcset="${result.img}" sizes="285px">
                            </div>
                        </a>
                        <figcaption class="card-figcaption">
                            <div class="card-figcaption-body">
                                <button type="button" class="button button--small card-figcaption-button quickview" data-event-type="product-click">{{ lang "products.quick_view" }}</button>
                                <label class="button button--small card-figcaption-button">
                                {{ lang "products.compare" }}
                                <input type="checkbox" name="products[]">
                                </label>
                                <a href="${result.url}" data-event-type="product-click" class="button button--small card-figcaption-button">{{ lang "products.choose_options" }}</a>
                            </div>
                        </figcaption>
                    </figure>
                    <div class="card-body">
                        <p class="card-text" data-test-info-type="brandName">${result.brand}</p>
                        <h3 class="card-title">
                            <a href="${result.url}" target="_blank">${result.name}</a>
                        </h3>
                        <div class="card-text" data-test-info-type="price">
                        <div class="price-section price-section--withoutTax">
                            <span class="price-label"></span>
                            <span class="price-now-label" style="display: none;"></span>
                            <span data-product-price-without-tax class="price price--withoutTax">$${result.price}</span>
                        </div>
                    </div>
                </article>`;
            optionsContainer.appendChild(productElement);
        });
    } else {
      optionsContainer.textContent = "No products match your criteria. Please try again!";
    }

    const restartButton = document.createElement("button");
    restartButton.textContent = "Restart Quiz";
    restartButton.addEventListener("click", restartQuiz);
    restartButton.classList.add("restart", "button", "button--primary");
    optionsContainer.appendChild(restartButton);
}

For reference, Handlebars calls lang like this: {{ lang "products.quick_view" }}