Imersão Dev - Aula 1 | Expandindo os Conhecimentos · TheDevick

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).

Sei que é um exercício introdutório, mas ainda sim, acho que vale mencionar alguns pontos e aprofundar um pouco mais (o objetivo não é dizer que está errado, mas sim deixar um complemento que pode ser consultado depois, pois tudo sempre pode ser melhorado) :-)

Primeiro o arredondamento. Vale lembrar que toFixed arredonda os valores, o que pode ou não ser desejado. Além disso, toFixed retorna uma string (sei que o JavaScript faz coerções de tipo, mas se for usar TypeScript, por exemplo, deve ter esses detalhes em mente). Enfim, outra forma de truncar o valor para limitar a quantidade de casas decimais é ter uma função do tipo:

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

Assim ela não arredonda, veja a diferença:

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

Quanto à formatação dos números, a linguagem já tem isso pronto. Basta usar o método toLocaleString:

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

O parâmetro pt-BR indica o locale que corresponde ao português do Brasil. Assim, ele já vai usar a vírgula como separador decimal, eliminando a necessidade do replace. Você pode usar outros, como por exemplo en-US (inglês americano), que o separador decimal muda automaticamente para o ponto.

E as demais opções servem para formatar valores monetários. Basta mudar o currency para a moeda desejada, que o respectivo símbolo será colocado. No caso do dólar, também adicionei o narrowSymbol para que seja somente $ (sem isso, ele mostra US$). Não deixe de ler a documentação para ver todas as opções possíveis.

E na verdade nem precisava da função truncar. Quando usamos o style: 'currency', ele usa a quantidade de casas decimais definido pela ISO 4217 - veja que tanto real (BRL) quanto dólar (USD) usam dois dígitos.

Mas isso pode ser mudado usando propriedades adicionais. Por exemplo, no mercado financeiro é comum trabalhar com 3 casas decimais, então bastaria trocar para:

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

E claro, vale a dica final, de que os números de ponto flutuante não são os mais adequados para valores monetários, devido a seus inúmeros problemas de precisão (Nubank que o diga). Mas aí é outra história...