如何在 flatMap 函数的元素之间添加 space？

Question

我正在为一个学校项目整理一个 Pokédex 应用程序。我的导师建议我使用 flatMap 函数来显示神奇宝贝的类型和能力，因为有时会有不止一种。

但是，它们只是在列表中以逗号分隔且没有间距。我想在神奇宝贝类型之间添加一些间距。任何人都可以帮助我如何做到这一点？

获取数据的代码如下：

function loadDetails(pokemon) {
    let url = pokemon.detailsUrl
    return fetch(url)
        .then(function (response) {
            return response.json()
        })
        .then(function (details) {
            pokemon.imageUrl = details.sprites.front_default
            pokemon.height = details.height
            pokemon.weight = details.weight
            pokemon.abilities = details.abilities.flatMap(
                (element) => element.ability.name
            )
            pokemon.types = details.types.flatMap(
                (element) => element.type.name
            )
        })
        .catch(function (e) {
            console.error(e)
        })
}

下面的代码是如何显示的：

function showModal(pokemon) {
    let modalBody = $('.modal-body')
    let modalTitle = $('.modal-title')

    //empty the modal before we start
    modalTitle.empty()
    modalBody.empty()

    // create the elements we want in the modal
    let nameElement = $(
        '<h1 class="text-capitalize">' + pokemon.name + '</h1>'
    )
    let imageElement = $('<img class="modal-img">')
    imageElement.attr('src', pokemon.imageUrl)
    let heightElement = $(
        '<p>' + '<b>Height: </b>' + pokemon.height + '</p>'
    )
    let weightElement = $(
        '<p>' + '<b>Weight: </b>' + pokemon.weight + '</p>'
    )
    let typesElement = $(
        '<p class="text-capitalize">' +
            '<b>Types: </b>' +
            pokemon.types +
            '</p>'
    )
    let abilitiesElement = $(
        '<p class="text-capitalize">' +
            '<b>Abilities: </b>' +
            pokemon.abilities +
            '</p>'
    )

    // append the elements to the modal
    modalTitle.append(nameElement)
    modalBody.append(imageElement)
    modalBody.append(heightElement)
    modalBody.append(weightElement)
    modalBody.append(typesElement)
    modalBody.append(abilitiesElement)

    $('#detailsmodal').modal()
}

Answer 1

您当前得到的结果（带逗号）是数组的字符串表示形式。您可以使用 join() 将数组与 space.

连接起来

const pokemons = ["Charmander", "Bulbasaur", "Squirtle"];

console.log(`${pokemons}`); // string representation of array (,)
console.log(pokemons.join(" ")); // spaces ( )

Answer 2

我用Array.join来控制信息的显示方式，像这样：

let abilitiesElement = $(
            '<p class="text-capitalize">' +
                '<b>Abilities: </b>' +
                pokemon.abilities.join(', ') +
                '</p>'
        )

如何在 flatMap 函数的元素之间添加 space？

How do I a space between elements of flatMap function?

javascript

flatmap