2
respostas

[Sugestão] Complemento da Aula

Na aula o preço na página fica da seguinte forma:

R$ 29.9 - Por exemplo.

Para trocar o ponto pela vírgula e colocar duas casas após a vírgula usei os métodos abaixo:

.toFixed(2) - Aqui você coloca a quantidade de casas que quer depois da vírgula.

.toString().replace(".", ",") - Aqui você coloca qual caractere você quer substituir no primeiro argumento e no segundo o caractere que você quer usar no lugar do outro.

Ficou asssim:

<p class="livro__preco" id="preco">R$${livro.preco.toFixed(2).toString().replace(".", ",")}</p>
2 respostas

Oi Lucas, tudo bem?

Obrigada por compartilhar sua sugestão conosco! Realmente, a utilização dos métodos .toFixed() e .toString().replace(".", ",") é uma ótima forma de formatar o preço para exibição na página.

Além disso, é importante lembrar que a formatação de valores monetários pode variar de acordo com o país ou região. No Brasil, por exemplo, é comum utilizar a vírgula como separador decimal e o ponto como separador de milhares.

Por isso, é sempre importante considerar o público-alvo da aplicação e qual a convenção de formatação de valores monetários utilizada na região em que ela será utilizada.

Um abraço e bons estudos.

Uma outra forma que encontrei que é mais usada em sistemas que funcionam independendo a moeda do país que a pessoa acessa, exemplo sites de venda como aliexpress..

// let livros = [];

const endpointDaApi = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';

//modo de manter uma moeda para cada país, nesse caso apenas Brasileira
const preco = new Intl.NumberFormat("pt-br", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 2,
});
1
const sectionLivros = document.getElementById('livros');


async function livros(){
    const response  = await fetch(endpointDaApi);
    const jsonData = await response.json();
    console.table(jsonData);
    exibeLivrosNaTela(jsonData)
    ;

    function exibeLivrosNaTela(livros){
        livros.forEach(livro => {

            let novoLivro =  `<div class="livro">
            <img class="livro__imagens" src="${livro.imagem}" alt="${livro.alt}" />
            <h2 class="livro__titulo">
            ${livro.titulo}
            </h2>
            <p class="livro__descricao">${livro.autor}</p>
            <p class="livro__preco" id="preco">${preco.format(livro.preco)}</p>
            <div class="tags">
            <span class="tag">${livro.categoria}</span>
            </div>
            </div>`;
            sectionLivros.innerHTML += novoLivro;

        });
    }

}


livros();

link da documentação : https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software