JavaScript 保留关键字未正确通过函数传递

Question

我正在尝试构建一个页面，用户可以在其中标记他们访问过的 map 上的城市，并将数据存储在 Firebase 上以供将来访问。我遇到的问题是“纽约”或“新奥尔良”等以保留关键字开头的城市。这是在页面加载时运行的函数，用于调整以前访问过的城市，以在 map 上标记为使用复选标记图像访问过。

  function adjustMarkers() {
  database.ref("users/" + uid + "/citiesVisited").once("value").then(function(userSnapshot){
    userSnap = userSnapshot.val();
    citiesArray = Object.entries(userSnap);
    for (var [cityName, visited] of citiesArray) {
        if (visited == "yes") {
            $("#" + cityName).attr("src", "assets/images/checkmark.png")
            $("#" + cityName).attr("data-clicked", "yes")
        }
    }
})

}

当此函数运行时，纽约、新奥尔良、华盛顿特区和洛杉矶等城市无法正确更新。我意识到我可以将这些城市名称与其他名称(例如 NY、NO、DC 和 LA)一起存储在 Firebase 中，以使其正常运行。但我非常希望将它们与正确的名称一起存储以用于其他显示目的。我可以在这方面使用解决方法吗？

第一次发帖，如果这篇文章违反了任何规则，我深表歉意。在发布此内容之前，我进行了相当多的搜索，但可能错过了之前的类似问题。

编辑:进一步思考，这可能与保留字根本没有任何关系，可能只是所有拥有多个单词的城市。如果解决方案对我来说立即显而易见，我将删除它。

Answer 1

问题不在于 Javascript 保留关键字 - 问题在于，如果 cityName 有空格，那么，例如，如果它是 New York:

$("#" + cityName)

将解决

$("#New York")

这意味着:找到一个 tagName 为“York”的元素，该元素是 ID 为“New”的元素的后代。

$("#New York").text('foo');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="New">
  <York>
    ????
  </York>
</div>

任何带有空格的 cityName 将无法按预期运行。

一个简单的解决方法是在 HTML 中用破折号替换所有空格(也可以在数据库中，或者在将 cityName 传递给 $ 之前)，这样它解析为类似的东西

$("#New-York")

如果数据库包含包含 Javascript 保留字的数据，可能您唯一需要担心的情​​况就是您使用 eval 或一个其等价物 - 我认为它不应该是值得担心的事情。