Prefer template literals to string concatenation

Author: matthiask

biome.json

@@ -15,9 +15,6 @@
                 "useArrowFunction": "off",
                 "noForEach": "off"
             },
-            "style": {
-                "useTemplate": "off"
-            },
             "suspicious": {
                 "noAssignInExpressions": "off"
             }

debug_toolbar/static/debug_toolbar/js/history.js

@@ -74,7 +74,7 @@ function refreshHistory() {
 
 function switchHistory(newStoreId) {
     const formTarget = djDebug.querySelector(
-        ".switchHistory[data-store-id='" + newStoreId + "']"
+        `.switchHistory[data-store-id='${newStoreId}']`
     );
     const tbody = formTarget.closest("tbody");
 
@@ -88,7 +88,7 @@ function switchHistory(newStoreId) {
         if (Object.keys(data).length === 0) {
             const container = document.getElementById("djdtHistoryRequests");
             container.querySelector(
-                'button[data-store-id="' + newStoreId + '"]'
+                `button[data-store-id="${newStoreId}"]`
             ).innerHTML = "Switch [EXPIRED]";
         }
         replaceToolbarState(newStoreId, data);

debug_toolbar/static/debug_toolbar/js/timer.js

@@ -27,36 +27,31 @@ function insertBrowserTiming() {
         } else {
             width = 0;
         }
-        return width < 1 ? "2px" : width + "%";
+        return width < 1 ? "2px" : `${width}%`;
     }
     function addRow(tbody, stat, endStat) {
         const row = document.createElement("tr");
+        const elapsed = performance.timing[stat] - timingOffset;
         if (endStat) {
+            const duration =
+                performance.timing[endStat] - performance.timing[stat];
             // Render a start through end bar
-            row.innerHTML =
-                "<td>" +
-                stat.replace("Start", "") +
-                "</td>" +
-                '<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
-                "<td>" +
-                (performance.timing[stat] - timingOffset) +
-                " (+" +
-                (performance.timing[endStat] - performance.timing[stat]) +
-                ")</td>";
+            row.innerHTML = `
+<td>${stat.replace("Start", "")}</td>
+<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>
+<td>${elapsed} (+${duration})</td>
+`;
             row.querySelector("rect").setAttribute(
                 "width",
                 getCSSWidth(stat, endStat)
             );
         } else {
             // Render a point in time
-            row.innerHTML =
-                "<td>" +
-                stat +
-                "</td>" +
-                '<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
-                "<td>" +
-                (performance.timing[stat] - timingOffset) +
-                "</td>";
+            row.innerHTML = `
+<td>${stat}</td>
+<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>
+<td>${elapsed}</td>
+`;
             row.querySelector("rect").setAttribute("width", 2);
         }
         row.querySelector("rect").setAttribute("x", getLeft(stat));

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -116,7 +116,7 @@ const djdt = {
             const toggleClose = "-";
             const openMe = this.textContent === toggleOpen;
             const name = this.dataset.toggleName;
-            const container = document.getElementById(name + "_" + id);
+            const container = document.getElementById(`${name}_${id}`);
             container
                 .querySelectorAll(".djDebugCollapsed")
                 .forEach(function (e) {
@@ -129,7 +129,7 @@ const djdt = {
                 });
             const self = this;
             this.closest(".djDebugPanelContent")
-                .querySelectorAll(".djToggleDetails_" + id)
+                .querySelectorAll(`.djToggleDetails_${id}`)
                 .forEach(function (e) {
                     if (openMe) {
                         e.classList.add("djSelected");
@@ -173,7 +173,7 @@ const djdt = {
                     top = window.innerHeight - handle.offsetHeight;
                 }
 
-                handle.style.top = top + "px";
+                handle.style.top = `${top}px`;
                 djdt.handleDragged = true;
             }
         }
@@ -255,7 +255,7 @@ const djdt = {
             localStorage.getItem("djdt.top") || 265,
             window.innerHeight - handle.offsetWidth
         );
-        handle.style.top = handleTop + "px";
+        handle.style.top = `${handleTop}px`;
     },
     hideToolbar() {
         djdt.hidePanels();
@@ -360,15 +360,15 @@ const djdt = {
             }
 
             document.cookie = [
-                encodeURIComponent(key) + "=" + String(value),
+                `${encodeURIComponent(key)}=${String(value)}`,
                 options.expires
-                    ? "; expires=" + options.expires.toUTCString()
+                    ? `; expires=${options.expires.toUTCString()}`
                     : "",
-                options.path ? "; path=" + options.path : "",
-                options.domain ? "; domain=" + options.domain : "",
+                options.path ? `; path=${options.path}` : "",
+                options.domain ? `; domain=${options.domain}` : "",
                 options.secure ? "; secure" : "",
                 "samesite" in options
-                    ? "; samesite=" + options.samesite
+                    ? `; samesite=${options.samesite}`
                     : "; samesite=lax",
             ].join("");
 

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -77,21 +77,18 @@ function ajax(url, init) {
                 return response.json().catch(function (error) {
                     return Promise.reject(
                         new Error(
-                            "The response  is a invalid Json object : " + error
+                            `The response  is a invalid Json object : ${error}`
                         )
                     );
                 });
             }
             return Promise.reject(
-                new Error(response.status + ": " + response.statusText)
+                new Error(`${response.status}: ${response.statusText}`)
             );
         })
         .catch(function (error) {
             const win = document.getElementById("djDebugWindow");
-            win.innerHTML =
-                '<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>' +
-                error.message +
-                "</h3></div>";
+            win.innerHTML = `<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>${error.message}</h3></div>`;
             $$.show(win);
             throw error;
         });
@@ -118,7 +115,7 @@ function replaceToolbarState(newStoreId, data) {
         const panel = document.getElementById(panelId);
         if (panel) {
             panel.outerHTML = data[panelId].content;
-            document.getElementById("djdt-" + panelId).outerHTML =
+            document.getElementById(`djdt-${panelId}`).outerHTML =
                 data[panelId].button;
         }
     });