为什么我的 var returns NaN 而不是 html 结构？

Question

我试图让我的 var 显示一个 html 结构，但它显示 NaN 为什么？

我尝试了很多方法，例如 console.log(rankinU)，并且都有效。不知何故 html2 没有

var i = 0;
var html2 = '';
const listaRanking = document.querySelector('#lista');
db.collection("usuarios").orderBy("puntos", "desc").limit(10)
    .get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            data                = doc.data();

            const rankinU  = `
        <div class="containerFlex">
            <div class="rank">#${i+1}</div>
            <div class="usuario">${data.usuario}</div>
            <div class="puntosr">${data.puntos}</div>
        </div>
        `;
            html2 =+ rankinU;

            console.log(html2);
            listaRanking.innerHTML = html2;
            i++;
    });
});

我希望它显示 Nan 以外的任何内容

Answer 1

这里：

html2 =+ rankinU;

您正在尝试使用复合赋值运算符，即 +=。您上面的代码相当于：

html2 = +rankinU;

并且一元运算符 + 尝试将其参数转换为数字。 HTML 字符串不会发生这种情况，因此您会得到 NaN。只需将运算符更改为：

html2 += rankinU;

或使用冗长的表示法 - 无论哪种方式都有效：

html2 = html2 + rankinU;

Answer 2

html2 =+ rankinU; 应该是 html2 += rankinU;.

a += b翻译成a = a + b，对字符串有效
a =+ b 转换为 a = +b，这对字符串无效，然后它将假设 b 是一个数字并尝试将其解析为数字（它不是，因此 NaN 分配给 a).

为什么我的 var returns NaN 而不是 html 结构？

why does my var returns NaN instead of an html structure?

html

javascript

innerhtml

firebase

google-cloud-firestore