Numeri, date e i18n in JavaScript

In questa lezione raccolgo un po’ di concetti che solitamente non so dove mettere. Quindi eccoci qui a parlare di conversioni di numeri, date, matematica, timer e internazionalizzazione.

Conversione di stringhe in numeri

In JavaScript, ci sono diversi modi per convertire una stringa in un numero, a seconda del tipo di conversione richiesta:

parseInt(string, base)

Per convertire una stringa in un numero intero, si usa spesso parseInt(string, base). Questa funzione analizza una stringa e ne estrae un numero intero in una base specificata. Ad esempio, parseInt("123", 10) converte la stringa "123" in un numero intero nella base decimale, restituendo il numero 123. Se invece vogliamo convertire una stringa binaria in un numero, possiamo usare parseInt("1010", 2), che restituirà 10, interpretando "1010" come un numero binario.

Esempio: js let intero = parseInt("123", 10); // 123 come numero intero let binario = parseInt("1010", 2); // 10 in binario

parseFloat(string)

Se abbiamo bisogno di convertire una stringa in un numero a virgola mobile, parseFloat(string) è la scelta giusta. Questa funzione analizza una stringa e restituisce un numero a virgola mobile. Ad esempio, parseFloat("123.45") converte la stringa "123.45" in un numero a virgola mobile 123.45.

Esempio: js let float = parseFloat("123.45"); // 123.45 come numero a virgola mobile

Number(string)

Per una conversione più generica, possiamo usare Number(string), che converte una stringa in un numero, sia esso intero o a virgola mobile. Ad esempio, Number("123") restituirà 123, mentre Number("123.45") restituirà 123.45.

Esempio: js let num = Number("123"); // 123 come numero let numFloat = Number("123.45"); // 123.45 come numero a virgola mobile

Usare il + davanti alla stringa

Un metodo rapido e meno verboso per convertire una stringa in un numero è l'uso del + davanti alla stringa. Questa sintassi concisa è molto comoda: scrivendo +"123" si ottiene il numero 123, e +"123.45" converte la stringa in 123.45.

Esempio: js let num = +"123"; // 123 come numero let numFloat = +"123.45"; // 123.45 come numero a virgola mobile

Verifica e conversione di tipi numerici

Oltre alla conversione dei numeri, è importante verificare il tipo di dati numerici. isNaN(value) è utilizzato per controllare se un valore è NaN (Not-a-Number). Ad esempio, isNaN("abc") restituirà true, indicando che "abc" non è un numero. D'altra parte, isNaN("123") restituirà false, poiché "123" è convertibile in un numero.

Esempio: js let test1 = isNaN("abc"); // true, perché "abc" non è un numero let test2 = isNaN("123"); // false, "123" è convertibile in un numero

isFinite(value)

isFinite(value) è utilizzato per verificare se un valore è un numero finito. Questo è utile per evitare valori infiniti come risultato di divisioni per zero. Ad esempio, isFinite(2/0) restituirà false, mentre isFinite(20) restituirà true.

Esempio: js let test1 = isFinite(2/0); // false, perché 2/0 è infinito let test2 = isFinite(20); // true, 20 è un numero finito

Problemi nella rappresentazione dei numeri in JavaScript

JavaScript utilizza il formato IEEE 754 per rappresentare i numeri, che è un formato standard per i numeri a virgola mobile. Tuttavia, ci sono alcune limitazioni e problemi da considerare:

• Precisione Limitata: Il formato IEEE 754 può portare a problemi di precisione, specialmente con i numeri a virgola mobile. Per esempio, 0.1 + 0.2 non è esattamente 0.3 in JavaScript a causa di questi limiti di precisione.

• Numeri Grandi: JavaScript non può rappresentare accuratamente numeri molto grandi o molto piccoli. I numeri oltre Number.MAX_SAFE_INTEGER (2^53 - 1) e al di sotto di Number.MIN_SAFE_INTEGER (-2^53 + 1) possono perdere precisione.

Questi problemi sono importanti da tenere in considerazione, soprattutto quando si lavora con operazioni matematiche precise o si gestiscono numeri molto grandi.

Per poter spiegare meglio il problema immaginiamo di usare delle tazze per misurare l'acqua. Tuttavia, queste tazze sono un po' strane: possono misurare solo certe quantità esatte e niente di più. Ad esempio, una può misurare esattamente 1/3 di litro, un'altra 1/4 di litro, e così via. Ora, se vuoi misurare 1/10 di litro (cioè 0.1 litro), non hai una tazza che può fare esattamente quella misura. Quindi, usi la tazza che può misurare qualcosa di molto vicino a 0.1, ma non esattamente 0.1.

Quando in JavaScript si sommano 0.1 e 0.2, è come se stessimo usando queste tazze imprecise. Sia 0.1 sia 0.2 non possono essere rappresentati esattamente con le nostre tazze (i numeri in virgola mobile in JavaScript). Quindi, quando li sommiamo, l'errore di misura si accumula, e il risultato finale non è esattamente 0.3, ma qualcosa di molto vicino.

In breve, il motivo per cui 0.1 + 0.2 non è esattamente 0.3 in JavaScript è perché i numeri in virgola mobile (come 0.1 e 0.2) non possono essere rappresentati con precisione perfetta nel computer, proprio come non possiamo misurare esattamente 0.1 litro con le nostre tazze speciali.

Operazioni matematiche con Math

Math è un oggetto integrato in JavaScript che fornisce una vasta gamma di metodi e proprietà per eseguire operazioni matematiche complesse. Non è un costruttore, ma piuttosto un oggetto statico, il che significa che i suoi metodi e proprietà possono essere utilizzati direttamente senza dover creare un'istanza di Math.

Questo oggetto serve come raccolta di funzioni e costanti matematiche. Le funzioni coprono operazioni come arrotondamenti, calcoli di potenze e radici, funzioni trigonometriche e logaritmiche, e generazione di numeri casuali. Le costanti fornite da Math includono numeri significativi come π (pi), e (base dei logaritmi naturali), e altri valori utili in vari contesti matematici.

Uno degli aspetti più utili di Math è che semplifica l'esecuzione di calcoli matematici che altrimenti sarebbero complessi e verbosi. Ad esempio, invece di scrivere una funzione personalizzata per calcolare la radice quadrata di un numero, gli sviluppatori possono semplicemente usare Math.sqrt().

Ecco alcuni punti chiave di Math:

• Non richiede inizializzazione: Essendo un oggetto statico, i suoi metodi e proprietà sono sempre disponibili.
• Ampia gamma di funzioni: Include funzioni per l'arrotondamento, trigonometria, logaritmi, esponenziali, e altro.
• Costanti matematiche: Fornisce accesso a costanti matematiche importanti, che sono utili in vari calcoli.
• Utilità universale: È utile in una vasta gamma di applicazioni, dall'ingegneria al design grafico.

Proprietà di Math

1. Costanti: Math fornisce costanti matematiche come Math.PI (il rapporto tra la circonferenza di un cerchio e il suo diametro), Math.E (la base dei logaritmi naturali), Math.SQRT2 (radice quadrata di 2), ecc.

   1let pi = Math.PI;  // 3.141592653589793

Metodi di Math

1. Funzioni Aritmetiche:

   • Math.pow(x, y): Restituisce x elevato alla potenza y.
   • Math.sqrt(x): Restituisce la radice quadrata di x.
   • Math.cbrt(x): Restituisce la radice cubica di x.

2. Funzioni Trigonometriche:

   • Math.sin(x), Math.cos(x), Math.tan(x): Funzioni trigonometriche standard.
   • Math.asin(x), Math.acos(x), Math.atan(x): Le loro inverse.

3. Arrotondamenti e Valori Assoluti:

   • Math.round(x): Arrotonda x al numero intero più vicino.
   • Math.floor(x): Restituisce il massimo intero minore o uguale a x.
   • Math.ceil(x): Restituisce il minimo intero maggiore o uguale a x.
   • Math.abs(x): Restituisce il valore assoluto di x.

4. Valori Massimi e Minimi:

   • Math.max([valori]): Restituisce il maggiore tra i valori forniti.
   • Math.min([valori]): Restituisce il minore tra i valori forniti.

5. Numeri Casuali:

   • Math.random(): Genera un numero casuale tra 0 (incluso) e 1 (escluso).

6. Logaritmi e Esponenziali:

   • Math.log(x): Restituisce il logaritmo naturale (base e) di x.
   • Math.exp(x): Restituisce e^x, dove e è la base dei logaritmi naturali.

Esempi di Utilizzo

1let angle = 45;
2let radians = angle * (Math.PI / 180);  // Converti gradi in radianti
3let sineValue = Math.sin(radians);  // Calcola il seno dell'angolo
4
5let number = -5.67;
6let absoluteValue = Math.abs(number);  // Valore assoluto
7
8let randomNum = Math.random();  // Genera un numero casuale tra 0 e 1

Math è estremamente utile in JavaScript per eseguire calcoli matematici complessi, dalla geometria e trigonometria al lavoro con casualità e logaritmi. La sua versatilità e semplicità d'uso lo rendono uno strumento indispensabile per gli sviluppatori.

Numeri grandi grandi con BigInt

Il tipo BigInt in JavaScript è una recente aggiunta al linguaggio, introdotta per gestire numeri interi molto grandi, oltre i limiti del tipo Number. Esaminiamo più da vicino cosa è BigInt e come viene utilizzato.

Cos'è BigInt?

• Tipologia di Dati: BigInt è un tipo primitivo che fornisce un modo per rappresentare interi di qualsiasi dimensione. A differenza del tipo Number in JavaScript, che può rappresentare con precisione numeri fino a 2^53 - 1 (Number.MAX_SAFE_INTEGER), BigInt può gestire numeri significativamente più grandi.

• Sintassi: I numeri BigInt sono creati aggiungendo n alla fine di un intero. Per esempio, 100n è un BigInt, non un Number.

  1let largeNumber = 1234567890123456789012345678901234567890n;

Come Utilizzare BigInt?

1. Operazioni Aritmetiche: BigInt supporta le operazioni aritmetiche standard come addizione, sottrazione, moltiplicazione e divisione. Tuttavia, tutte le operazioni su BigInt devono coinvolgere solo altri BigInt.

   1let result = 100n + 200n;  // 300n

2. Confronti: È possibile confrontare BigInt con altri BigInt utilizzando operatori di confronto standard.

   1let isBigger = 500n > 400n;  // true

3. Limitazioni: Non è possibile mischiare operazioni tra Number e BigInt direttamente. Ad esempio, tentare di aggiungere un Number a un BigInt senza conversione causerà un errore.

   1// Questo causerà un errore
   2let sum = 10n + 20;  // TypeError

4. Conversione tra Number e BigInt: È possibile convertire un Number in BigInt e viceversa, ma bisogna prestare attenzione a non perdere precisione quando si converte un BigInt in un Number.

   1let num = 10;
   2let bigIntFromNum = BigInt(num);  // Converte Number in BigInt
   3
   4let bigInt = 100n;
   5let numFromBigInt = Number(bigInt);  // Converte BigInt in Number

Casi d'Uso di BigInt

• Numeri Molto Grandi: BigInt è utile in contesti in cui si necessita di lavorare con numeri interi più grandi di quanto Number possa gestire in modo affidabile, come in applicazioni finanziarie, criptovalute, o quando si lavora con grandi identificatori numerici.

• Calcolo Scientifico e Crittografia: In ambiti che richiedono alta precisione e grandi numeri, come il calcolo scientifico avanzato o la crittografia, BigInt offre la capacità di gestire calcoli complessi con numeri molto grandi.

BigInt riempie una lacuna importante in JavaScript, permettendo agli sviluppatori di lavorare con interi di dimensioni praticamente illimitate, garantendo al contempo precisione e affidabilità nei calcoli.

L’oggetto Date

L'oggetto Date in JavaScript viene utilizzato per lavorare con date e orari. È possibile rappresentare una specifica data e ora, l'ora attuale o date calcolate in base a vari parametri.

Creazione di un oggetto Date

• Data e Ora Attuali: new Date() crea un oggetto Date con la data e l'ora correnti.
• Data e Ora Specifiche: new Date(year, month, day, hours, minutes, seconds, milliseconds) permette di specificare una data e un'ora. Attenzione: i mesi in JavaScript partono da 0 (0 = gennaio, 1 = febbraio, ecc.).
• Da Stringa: new Date(dateString) crea un oggetto Date da una stringa di data.

Metodi di Date

1. Ottenere Componenti della Data:

   • getDate(), getMonth(), getFullYear(): Ottengono rispettivamente il giorno, il mese e l'anno.
   • getHours(), getMinutes(), getSeconds(): Restituiscono ore, minuti e secondi.

2. Impostare Componenti della Data:

   • setDate(), setMonth(), setFullYear(): Impostano il giorno, il mese e l'anno.
   • setHours(), setMinutes(), setSeconds(): Impostano ore, minuti e secondi.

3. Formato Data e Ora:

   • toString(), toLocaleString(): Convertire una data in una stringa.
   • toDateString(), toTimeString(): Restituiscono rispettivamente solo la parte della data o dell'ora.

4. Operazioni Temporali:

   • getTime(): Restituisce il timestamp della data, ovvero il numero di millisecondi passati dal 1° gennaio 1970, UTC.
   • setTime(timestamp): Imposta la data e l'ora basandosi sul numero di millisecondi passati dal 1° gennaio 1970, UTC.

Calcolo con le date

• Differenza tra Date: Per calcolare la differenza tra due date, puoi sottrarre i loro timestamp. Questo restituirà la differenza in millisecondi, che può essere convertita in giorni, ore, minuti, ecc.

  1let start = new Date('2023-01-01');
  2let end = new Date('2023-12-31');
  3let diff = end - start;  // Differenza in millisecondi

• Manipolazione delle Date: Aggiungere o sottrarre giorni, mesi o anni da una data può essere fatto usando i metodi setDate(), setMonth(), ecc.

  1let date = new Date('2023-01-01');
  2date.setMonth(date.getMonth() + 1);  // Aggiunge un mese

Fusi Orari e UTC

• Gestione dei Fusi Orari: JavaScript gestisce i fusi orari automaticamente. Tuttavia, è possibile ottenere e impostare l'ora in UTC usando metodi come getUTCHours() e setUTCHours().

• Conversione tra Fusi Orari: Convertire le date tra diversi fusi orari richiede un po' di lavoro, ma può essere facilitato con librerie esterne come moment-timezone.

Considerazioni sull'Uso delle Date

• Inconsistenze nel Browser: La gestione delle date può variare leggermente tra diversi browser, specialmente per date storiche o in formati non standard.
• Complessità dei Fusi Orari: La gestione dei fusi orari può essere complessa, specialmente per applicazioni che necessitano di accuratezza a livello globale.

L'oggetto Date in JavaScript offre un'ampia gamma di funzionalità per la gestione di date e orari. Mentre è sufficientemente potente per molte applicazioni, operazioni più complesse, specialmente quelle che coinvolgono fusi orari diversi, possono richiedere l'uso di librerie esterne.

Internazionalizzazione in JavaScript con Intl

L'oggetto Intl (Internationalization) è un namespace che fornisce funzionalità di internazionalizzazione per stringhe, numeri, e date in diverse lingue e formati regionali. Due delle sue principali caratteristiche sono Intl.NumberFormat e Intl.DateTimeFormat.

Intl.NumberFormat

Intl.NumberFormat consente di formattare numeri in diversi formati locali. Ciò include la formattazione di valute, percentuali, e numeri decimali secondo le convenzioni locali.

Esempio di Formattazione di Numeri:

1  let number = 123456.789;
2
3  // Formattazione in stile tedesco
4  let germanFormat = new Intl.NumberFormat('de-DE').format(number);
5  // "123.456,789"
6
7  // Formattazione della valuta in stile giapponese
8  let japaneseCurrency = new Intl.NumberFormat('ja-JP', {
9    style: 'currency',
10    currency: 'JPY'
11  }).format(number);
12  // "￥123,457"

Intl.DateTimeFormat

Intl.DateTimeFormat è utilizzato per formattare date e orari. Questo è particolarmente utile poiché la rappresentazione delle date varia notevolmente tra le diverse culture.

Esempio di Formattazione di Date:

1  let date = new Date();
2
3  // Formattazione della data in stile americano
4  let usFormat = new Intl.DateTimeFormat('en-US').format(date);
5  // "12/31/2023"
6
7  // Formattazione della data in stile italiano
8  let italianFormat = new Intl.DateTimeFormat('it-IT').format(date);
9  // "31/12/2023"

Considerazioni sull'uso di Intl

• Supporto del Browser: Mentre la maggior parte dei browser moderni supportano Intl, è sempre bene verificare la compatibilità, specialmente per caratteristiche più recenti o meno comuni.
• Prestazioni: La formattazione internazionale può essere più costosa in termini di prestazioni rispetto ai metodi di formattazione più semplici. È consigliabile quindi creare gli oggetti Intl.NumberFormat e Intl.DateTimeFormat una volta e riutilizzarli quando possibile.

L'internazionalizzazione è un aspetto fondamentale per garantire che le applicazioni web siano accessibili e comprensibili per un pubblico globale. JavaScript, attraverso l'API Intl, fornisce strumenti robusti e flessibili per supportare una vasta gamma di formati locali per numeri e date, rendendo più semplice lo sviluppo di applicazioni veramente globali.

Timer in JavaScript

Una funzionalità fondamentale per gestire il tempo e le operazioni asincrone in un'applicazione web in JavaScript sono i timer. I due principali tipi di timer sono setTimeout() e setInterval(), accompagnati dalle loro funzioni complementari clearTimeout() e clearInterval().

setTimeout()

setTimeout() è una funzione che permette di eseguire un blocco di codice o una funzione dopo un ritardo specificato in millisecondi.

• Sintassi: setTimeout(function, delay, [arg1, arg2, ...])
  • function: La funzione da eseguire dopo il ritardo.
  • delay: Il ritardo in millisecondi.
  • arg1, arg2, ...: Argomenti opzionali da passare alla funzione.

Esempio di Uso:

1  let timerId = setTimeout(() => {
2    console.log("Questo messaggio appare dopo 2 secondi");
3  }, 2000);

Annullamento di setTimeout: Utilizzando clearTimeout(), è possibile annullare un timer impostato con setTimeout() prima che venga eseguito.

1  clearTimeout(timerId);

setInterval()

setInterval() è simile a setTimeout(), ma invece di eseguire la funzione una sola volta dopo un ritardo, la esegue ripetutamente a intervalli regolari.

• Sintassi: setInterval(function, interval, [arg1, arg2, ...])
  • function: La funzione da eseguire a ogni intervallo.
  • interval: L'intervallo tra le esecuzioni in millisecondi.
  • arg1, arg2, ...: Argomenti opzionali da passare alla funzione.

Esempio di Uso:

1  let intervalId = setInterval(() => {
2    console.log("Questo messaggio appare ogni 3 secondi");
3  }, 3000);

Annullamento di setInterval: Utilizzando clearInterval(), è possibile interrompere un timer impostato con setInterval().

1  clearInterval(intervalId);

Considerazioni sull'Uso dei Timer

• Gestione della Memoria: È importante ricordarsi di cancellare i timer non più necessari per evitare perdite di memoria, specialmente per i timer impostati con setInterval.
• Comportamento nei Browser: I timer in JavaScript non sono garantiti per essere esatti al millisecondo a causa del modo in cui il motore JavaScript gestisce gli eventi e le attività in background.
• Timer in Ambienti Asincroni: L'uso di setTimeout e setInterval può essere complesso in ambienti asincroni, soprattutto quando si gestiscono promesse o si utilizza l'asincronia con async/await.

I timer in JavaScript, rappresentati da setTimeout e setInterval, sono strumenti potenti per gestire operazioni temporizzate, ritardi e cicli periodici. Sono ampiamente utilizzati in una varietà di situazioni, dalle animazioni alla gestione di richieste asincrone, e sono essenziali per qualsiasi sviluppatore JavaScript che lavora con la temporizzazione e l'asincronia nel browser.