Como converter string para number em Javascript

string

Como converter string para number em Javascript

Michelly Oliveira   18:38:00

 

Há muitas maneiras de converter uma string em um número usando JavaScript. Mas como isso se parece no código?

Neste artigo, mostrarei 11 maneiras de converter uma string em um número.

1 - Como converter uma string em um número em JavaScript usando a função Number()

Uma maneira de converter uma string em um número seria usar a função Number().

Neste exemplo, temos uma string chamada quantity com o valor de "12".

const quantity = "12";

Se usamos o operador typeof em quantity, ele retornará o tipo de string.

console.log(typeof quantity);

 

Podemos converter quantity em um número usando a função Number assim:

Number(quantity);

Podemos verificar que agora é um número usando o operador typeof novamente.

console.log(typeof Number(quantity));

 

Se você tentasse passar um valor que não pode ser convertido em um número, o valor de retorno seria NaN(Not a Number).

console.log(Number("awesome"));

2 - Como converter uma string em um número em JavaScript usando a função parseInt()

Outra maneira de converter uma string em um número é usar a função parseInt(). Esta função recebe uma string e uma raiz opcional.

Uma raiz é um número entre 2 e 36 que representa a base em um sistema numérico. Por exemplo, uma base de 2 representaria o sistema binário, enquanto uma base de 10 representaria o sistema decimal.

Podemos usar a variável quantity anterior para converter essa string em um número.

const quantity = "12";

console.log(parseInt(quantity, 10));

O que acontece se eu tentar mudar a variável quantity para "12.99"? O resultado usando parseInt() será o número 12,99?

const quantity = "12.99";

console.log(parseInt(quantity, 10));

 

Como você pode ver, o resultado é um inteiro arredondado. Se você quiser retornar um número de ponto flutuante, precisará usar parseFloat().

3 - Como converter uma string em um número em JavaScript usando a função parseFloat()

A função  parseFloat() receberá um valor e retornará um número de ponto flutuante. Exemplos de números de ponto flutuante seriam 12,99 ou 3,14.

Se modificarmos nosso exemplo anterior para usar parseFloat(), o resultado seria o número de ponto flutuante de 12,99.

const quantity = "12.99";

console.log(parseFloat(quantity));

Se você tiver espaços em branco à esquerda ou à direita em sua string, parseFloat() ainda converterá essa string em um número de ponto flutuante.

const quantity = "   12.99    ";

console.log(parseFloat(quantity));

Se o primeiro caractere em sua string não puder ser convertido em número, parseFloat() retornará NaN.

const quantity = "F12.99";

console.log(parseFloat(quantity));

 

4 - Como converter uma string em um número em JavaScript usando o operador unário de mais (+)

O operador unário de mais (+) converterá uma string em um número. O operador irá antes do operando.

const quantity = "12";

console.log(+quantity);

 

Também podemos usar o operador unário de mais (+) para converter uma string em um número de ponto flutuante.

const quantity = "12.99";

console.log(+quantity);

 

Se o valor da string não puder ser convertido em um número, o resultado será NaN.

const quantity = "awesome";

console.log(+quantity);

 

5 - Como converter uma string em um número em JavaScript multiplicando a string pelo número 1

Outra maneira de converter uma string em um número é usar uma operação matemática básica. Você pode multiplicar o valor da string por 1 e ele retornará um número.

const quantity = "12";

console.log(quantity * 1);

 

Como você pode ver, quando multiplicamos o valor de quantity por 1, ele retorna o número 12. Mas como isso funciona?

Neste exemplo, o JavaScript está convertendo nosso valor de string em um número e, em seguida, realizando essa operação matemática. Se a string não puder ser convertida em um número, a operação matemática não funcionará e retornará NaN.

const quantity = "awesome";

console.log(quantity * 1);

 

Este método também funcionará para números de ponto flutuante.

const quantity = "10.5";

console.log(quantity * 1);

 

6 - Como converter uma string em um número em JavaScript dividindo a string pelo número 1

Em vez de multiplicar por 1, você também pode dividir a string por 1. JavaScript está convertendo nosso valor de string em um número e, em seguida, realizando essa operação matemática.

const quantity = "10.5";

console.log(quantity / 1);

7 - Como converter uma string em um número em JavaScript subtraindo o número 0 da string

Outro método seria subtrair 0 da string. Como antes, o JavaScript está convertendo nosso valor de string em um número e, em seguida, realizando essa operação matemática.

const quantity = "19";

console.log(quantity - 0);

 

8 - Como converter uma string em um número em JavaScript usando o operador NOT bit a bit (~)

O operador NOT bit a bit (~) inverterá os bits de um operando e converterá esse valor em um inteiro com sinal de 32 bits. Um inteiro com sinal de 32 bits é um valor que representa um inteiro em 32 bits (ou 4 bytes).

Se usarmos um operador NOT bit a bit (~) em um número, ele executará esta operação: -(x + 1)

console.log(~19);

 

Mas se usarmos dois operadores NOT bit a bit (~), ele converterá nossa string em um número.

const quantity = "19";

console.log(~~quantity);

 

Este método não funcionará para números de ponto flutuante porque o resultado seria um inteiro.

const quantity = "19.99";

console.log(~~quantity);

Se você tentasse usar esse método em caracteres não numéricos, o resultado seria zero.

const quantity = "awesome";

console.log(~~quantity);

 

Esse método tem suas limitações porque começará a quebrar para valores considerados muito grandes. É importante certificar-se de que seu número esteja entre os valores de um inteiro de 32 bits com sinal.

const quantity = "2700000000";

console.log(~~quantity);

Para saber mais sobre o operador NOT bit a bit(~), leia a documentação .

9 - Como converter uma string em um número em JavaScript usando a função Math.floor()

Outra maneira de converter uma string em um número é usar a função Math.floor(). Esta função arredondará o número para o inteiro mais próximo.

const quantity = "13.4";

console.log(Math.floor(quantity));

 

Assim como nos exemplos anteriores, se tentássemos usar caracteres não numéricos, o resultado seria NaN.

const quantity = "awesome";

console.log(Math.floor(quantity));

10 - Como converter uma string em um número em JavaScript usando a função Math.ceil()

A função Math.ceil() arredondará um número para o inteiro mais próximo.

const quantity = "7.18";

console.log(Math.ceil(quantity));

11 - Como converter uma string em um número em JavaScript usando a função Math.round()

A função Math.round() arredondará o número para o inteiro mais próximo.

Se eu tiver o valor de 6,3, então Math.round() retornará 6.

const quantity = "6.3";

console.log(Math.round(quantity));

Mas se eu alterar esse valor para 6,5, Math.round() retornará 7.

const quantity = "6.5";

console.log(Math.round(quantity));

Conclusão

Neste artigo, mostrei 11 maneiras de converter uma string em um número usando JavaScript.

Aqui estão os 11 métodos diferentes discutidos no artigo.

1. Usando a função Number()
2. Usando a função parseInt()
3. Usando a função parseFloat()
4. Usando o operador unário de mais (+)
5. Multiplicando a string pelo número 1
6. Dividindo a string pelo número 1
7. Subtraindo o número 0 da string
8. Usando o operador NOT bit a bit (~)
9. Usando a função Math.floor()
10. Usando a função Math.ceil()
11. Usando a função Math.round()

Espero que você tenha gostado deste artigo e boa sorte em sua jornada JavaScript.

Fonte: https://www.freecodecamp.org/news/how-to-convert-a-string-to-a-number-in-javascript/

Types of Cases

Snake Case

Types of Cases

Michelly Oliveira   14:58:00

🐫 - camelCase

🐍 - snake_case

🐍 - UPPER_SNAKE_CASE

🍗 - Kebab-case

👨 - PascalCase

Os breakpoints mais utilizados na internet

Responsivo

Os breakpoints mais utilizados na internet

Michelly Oliveira   13:50:00

 

Conheça os principais  breakpoints  para utilizar nos seus projeto

Dispositivos Móveis:

@media (min-width:320px) and (max-width: 480px) { }

Ipads e Tablets

@media (min-width:481px) and (max-width: 768px) {  }

Laptops

@media (min-width:769px) and (max-width: 1279px) {  }

Desktops e TV's

@media (min-width:1279px) {  }

O & do Sass

Sass

O & do Sass

Michelly Oliveira   16:11:00

O & é um recurso extremamente útil no Sass (e Less). É usado para aninhar . Pode ser uma boa economia de tempo quando você sabe como usá-lo, ou um pouco de perda de tempo quando você está lutando e poderia ter escrito o mesmo código em CSS normal.

Vamos ver se podemos realmente entendê-lo.

Aninhamento básico

.parent {
  .child {}
}

Isso compila para:

.parent .child {}

Você pode aninhar o quanto quiser, mas é uma boa prática mantê-lo apenas um nível ou dois para evitar seletores excessivamente específicos (que são menos úteis e mais difíceis de substituir).

Adicionando outra classe

O & vem a calhar quando você está aninhando e quer criar um seletor mais específico, como um elemento que tem *ambas* duas classes, assim:

.some-class.another-class { }

Você pode fazer isso durante o aninhamento usando o &.

.some-class {
  &.another-class {}
}

O & sempre se refere ao seletor pai ao aninhar. Pense no & como sendo removido e substituído pelo seletor pai. Assim:

O momento “ah”!

Pegue este Sass:

.parent {
  .child {}
}

Na verdade, isso pode ser considerado uma abreviação para aninhar com o &:

.parent {
  & .child {}
}

Então, esses dois exemplos compilam para a mesma coisa:

.parent .child {}

O exemplo com o & não é nada diferente do exemplo sem o &. Aninhar sem o & é uma abreviação de aninhar com ele. Podemos pensar no & como um mecanismo que nos permite colocar o seletor pai onde precisarmos dele em nosso seletor filho. Permite-nos aninhar com alterações. Vejamos mais alguns exemplos.

Usando o & com pseudo classes

Você pode escrever pseudo classes em uma classe de maneira muito menos repetitiva com o &:

.button {
  &:visited { }
  &:hover { }
  &:active { }
}

Isso compila para:

.button:visited { }
.button:hover { }
.button:active { }

O & neste caso nos permite posicionar .button diretamente ao lado de pseudo classes sem repetição no código de autoria. Se deixarmos de fora o & deste exemplo, o aninhamento básico colocaria um espaço entre eles assim…

.button :hover

… o que não é o mesmo.

Usando o & com >, + e ~

Usar o & com o combinador filho > , o combinador irmão adjacente + e o combinador irmão geral ~ é muito fácil. No começo eu pensei que você tinha que usar o &, mas:

// Atualmente você não tem que fazer isso.
// Aqui, o e comercial é implícito.
.button {
  & > span { }
  & + span { }
  & ~ span { }
}

Deixar os &'s fora do seletor funciona aqui:

// Este compila do mesmo jeito que anterior
.button {
  > span { }
  + span { }
  ~ span { }
}

Ambos os exemplos compilam neste CSS:

.button > span { }
.button + span { }
.button ~ span { }

Qualificação com base no contexto

Seletores aninhados não precisam necessariamente começar com o e comercial. Você pode qualificar um seletor colocando o & à direita.

.button {
  body.page-about & { }
}

Estamos reposicionando o seletor pai exatamente onde precisamos. Isso é realmente útil para qualificar um seletor com base em um pai diferente. Isso irá compilar para:

body.page-about .button {}

Ou seja, selecione a classe button apenas quando filho de body com uma classe page-about.

Ajustando a definição de &

Pense no & como não apenas sendo substituído pelo seletor pai, mas como sendo substituído pelo seletor pai *compilado*.

Isso é importante ao aninhar mais de dois níveis de profundidade, onde mais de um nível tem um arquivo &. Estes próximos dois exemplos malucos levam esse ponto para casa.

Exemplo maluco, mas funcional #1

Não escreva seletores assim:

.parent {
  .child {
    & div & & > a {}
  }
}

Para cada um &, ele será substituído pelo seletor pai compilado. Portanto, toda vez que houver um &, inseriremos .parent .child. Aqui está o CSS compilado:

.parent .child div .parent .child .parent .child > a {}

Exemplo maluco, mas funcional #2

.parent {
  .child {
    .grand-child & {
      &.sibling { }
    }
  }
}

Para compilar mentalmente este CSS, comece na camada superior e vá descendo, destacando as camadas externas e substituindo o & pelo novo seletor pai compilado.

Aqui está compilado:

.grand-child .parent .child.sibling {}

O que & não é

Descobri que de vez em quando estava usando o & para algo que não era. O & não permite que você percorra seletivamente sua árvore de seletores aninhados para um determinado local e use apenas uma pequena parte do seletor pai compilado que você deseja usar. Eu queria fazer algo assim antes:

.grand-parent {
  .parent {
    &(1) .child {} // Tentando pegar `.parent`, não `.grand-parent .parent`
  }
}

Minha intenção era que o & só fosse substituído .parent na esperança de compilar para isso:

.parent .child {}

Mas isso não funciona.

O & é sempre o seletor pai totalmente compilado.

@at-root para o resgate

Vale a pena mencionar que @at-root permite que você saia de sua estrutura de aninhamento inteiramente para a “raiz” de sua árvore de aninhamento.

.grand-parent {
  .parent {
    @at-root .child {}
  }
}

Nós nos teletransportamos para fora da árvore de aninhamento para este CSS compilado:

.child {}

Isso é legal. De uma perspectiva organizacional, todo o código ainda está agrupado, o que pode ser observado como um benefício não reconhecido do aninhamento. @at-rootpo de ajudar a manter os níveis de especificidade baixos porque você não tem mais o seletor pai compilado para aumentar a especificidade. Ao mesmo tempo, mantendo seu código conceitualmente organizado com aninhamento:

.grand-parent {
  .parent {
    @at-root body.page-about .child {}
  }
}

CSS compilado:

body.page-about .child {}

Existem alguns outros casos de uso para o & que pode ser divertido.

Duplicando a especificidade

Às vezes você precisa derrubar a especificidade de uma biblioteca CSS de terceiros para se apropriar do estilo:

.parent.parent {}

É muito menos avassalador do que usar e ID, estilo inline ou !important e pode ter benefícios sobre a qualificação do seletor com um elemento pai arbitrário. O nível de especificidade não é aumentado com base no contexto de um seletor, mas apenas por si mesmo. Com o & você pode fazer a mesma coisa assim.

.parent {
  &#{&} { }
}

Os colchetes de interpolação #{ } são necessários, pois dois e comerciais se tocam são Sass inválidos.

Modificando o e comercial

Mesmo que você não possa ter dois E comercial tocando sem os colchetes de interpolação — como demonstramos anteriormente em nosso exemplo de pseudoclasse — você pode fazer com que outro seletor toque o e comercial. Tocar no e comercial funciona bem com classes modificadoras.

.btn {
  &-primary {}
  &-secondary {}
}

CSS compilado:

.btn-primary {}
.btn-secondary {}

Isso pode ser bastante útil se empregar uma metodologia de nomenclatura (ou seja, BEM) que usa classes combinadas de traço e sublinhado em vez de seletores combinados.

Conclusão

O e comercial combinado com aninhamento é um ótimo recurso. Uma vez que você saiba o que está fazendo, criar seu Sass pode se tornar mais fácil, rápido e menos propenso a erros.

Aqui estão alguns outros artigos especificamente sobre o e comercial, para seu prazer de referência:

• Referenciando seletores pai usando o caractere e comercial de
  Adam Stacoviak
• Sass Snippets: The Almighty Ampersand por Una Kravets
• The e comercial & a killer Sass recurso de Joel Oliveira

Fonte: https://css-tricks.com/the-sass-ampersand/