Imersão Dev - Aula 1 | Expandindo os Conhecimentos

Olá a todos. Como sabem, essa semana, está rolando a Imersão Dev, e tivemos a primeira aula, então, iremos expandir os conhecimentos.

Os desafios não serão mostrados nesse tutorial, mas você pode expandir esses conhecimentos para refazer os desafios.

Código

O Código entregue no final da aula foi:

var valorEmDolar = 64;
var cotacaoDoDolar = 5.32;

var valorEmReal = valorEmDolar * cotacaoDoDolar;
valorEmReal = valorEmReal.toFixed(2);
alert("R$ " + valorEmReal);

Conteúdos

• Mais Detalhes no Alerta
• Usando o toFixed novamente
• Estilizando Os Números

Mais Detalhes no Alerta

No final da aula, aprendemos sobre Concatenação, que é um jeito de juntarmos o valores de duas variáveis através do operador +.

A Ideia

Pessoalmente, achei que faltou mostrar quantos dólares está sendo convertido. Ao final, queremos mostrar algo como $64 são R$340.48.

A Implementação

Para implementarmos, usaremos a mesma técnica de concatenação. Para isso, colocaremos:

alert("$" + valorEmDolar + " são R$" + valorEmReal);

Note que pessoalmente, não gosto do espaço entre o cifrão e o valor, então decidi deixar sem, mas isso é apenas estética. Você pode mudar como quiser :)

Usando o toFixed novamente

Como foi apresentado na aula, o comando toFixed serve para diminuirmos as casas decimais de um valor.

A Ideia

Perceba que, agora, que estamos mostrando o valor em dolar também, esse valor não está com uma vírgula depois do 64. Para fins estéticos, vamos mostrar esse valor com uma vírgula, seguido de dois zeros ao lado, para termos uma resposta assim: $64.00 são R$340.48

A Implementação

Para implementarmos essa estilização, vamos declarar uma nova variável valorEmDolarDecimal, que vai servir para mostrar o valor na tela. Além disso, vou declarar uma nova variável chamada texto, que vai servir apenas para tirar todas essas concatenações de dentro do alerta.

var valorEmDolarDecimal = valorEmDolar.toFixed(2);
var texto = "$" + valorEmDolarDecimal + " são R$" + valorEmReal;
alert(texto);

Estilizando Os Números

Como foi apresentado na aula, em um número decimal, a parte inteira da parte decimal é separada por um ponto, diferentemente do jeito que estamos habituados a fazer, que é com vírgulas. Mas, perceba que quando mostramos os valores para o usuário, estamos mostando-os com ponto.

A Ideia

Vamos trocar as ocorrências de todos os pontos por vírgulas de nossos números. Queremos que ao final, tenhamos uma mensagem assim: $64,00 são R$340,48

A Implementação

Para a implementação, faremos algo parecido quando colocamos os zeros na frente do Dólar. mas, ao invés de usar toFixed, usaremos replace, que é para substituir a ocorrência de um caractere por outro. Precisamos colocar dois valores dentro dos parênteses. O primeiro valor será o(s) caractere(s) a ser buscasdo(s), que no nosso caso, é o ponto. O segundo valor é o(s) caractere(s) a ser colocado(s) que no nosso caso, será uma virgula. Perceba que, então, precisamos passar dois parâmetros para funcionar corretamente . Para o JavaScript saber qual o primeiro valor e qual o segundo valor, separamos-o por meio de uma vírgula.

var valorEmRealEstilizado = valorEmReal.replace(".", ",");
var valorEmDolarEstilizado = valorEmDolarDecimal.replace(".", ",");
var texto = "$" + valorEmDolarEstilizado + " são R$" + valorEmRealEstilizado;
alert(texto);

Peceba que estamos estilizando tanto o valor em dólar quanto o valor em real.

Sobre Mim 🐘

Me Chamo Erick. Desenvolvedor PHP (Symfony).

• LinkedIn
• Github
• Site
• Twitter
• Instagram

function truncar(valor, casas=2) {
    var fator = 10 ** casas;
    return Math.floor(valor * fator) / fator;
}

var valor = 1.235;
console.log(valor.toFixed(2));  // toFixed arredonda:   1.24
console.log(truncar(valor, 2)); // agora não arredonda: 1.23

function truncar(valor, casas=2) {
    var fator = 10 ** casas;
    return Math.floor(valor * fator) / fator;
}

var valorEmDolar = 64;
var cotacaoDoDolar = 5.32;
var valorEmReal = truncar(valorEmDolar * cotacaoDoDolar);
var texto = valorEmDolar.toLocaleString('pt-BR', { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' })
            + ' são '
            + valorEmReal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
console.log(texto); // $ 64,00 são R$ 340,48

// mostra o valor com 3 casas decimais
valorEmReal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 3, maximumFractionDigits: 3 });