Conversioni di tipo in JavaScript

JavaScript è un linguaggio tipizzato dinamicamente: una variabile può contenere una string in un momento e un numero in quello successivo, senza mai dichiarare anticipatamente il tipo di un valore. Per via di questa flessibilità, i valori devono continuamente passare da un tipo all'altro — un numero diventa testo da stampare, il testo di un campo modulo diventa un numero per un calcolo, un object viene verificato per la sua "veridicità" all'interno di un if. Queste conversioni avvengono in due modi: esplicitamente, quando si chiama una funzione come String() o Number() direttamente, e implicitamente (detta anche coercizione), quando il linguaggio converte automaticamente un valore per adattarlo all'operazione. Questo capitolo tratta entrambi i casi, le regole esatte per ogni tipo di destinazione e le situazioni che colgono quasi tutti di sorpresa ad un certo punto.

Se non hai ancora letto i tipi di dati disponibili, è utile scorrerli prima — le conversioni hanno senso solo quando sai tra cosa stai convertendo.

Le Tre Conversioni

Quasi ogni conversione in JavaScript punta a uno dei tre tipi primitivi: string, number o boolean. Non esiste un'operazione generica "converti nel tipo X"; ogni tipo di destinazione ha le proprie regole. Le esamineremo una per una, per poi vedere quando il linguaggio le applica automaticamente.

Conversione in String

La conversione in string trasforma un valore nella sua forma testuale. Avviene esplicitamente con la funzione String(), e implicitamente ogni volta che un valore incontra una string nella concatenazione o viene interpolato in un template literal.

String(123);        // "123"
String(true);       // "true"
String(null);       // "null"
String(undefined);  // "undefined"
`Value: ${42}`;     // "Value: 42"

Le regole sono intuitive per i primitivi — il valore viene reso esattamente come ci si aspetterebbe di leggerlo. Nota che null e undefined diventano il testo letterale "null" e "undefined", non una string vuota.

Gli object e gli array sono più interessanti. Un array diventa i suoi elementi uniti da virgole, mentre un object semplice diventa il notoriamente poco utile "[object Object]":

Quindi un array vuoto viene convertito in string vuota, mentre null/undefined all'interno di un array vengono rappresentati come slot vuoti (quindi [null, 5] dà ",5"). Il risultato "[object Object]" per gli object è il motivo per cui si ricorre a JSON.stringify(obj) quando si vuole effettivamente leggere il contenuto di un object.

Conversione Numerica

La conversione numerica trasforma un valore in un numero. La forma esplicita è la funzione Number(); implicitamente avviene con l'operatore unario più (+value) e con la maggior parte degli operatori aritmetici e di confronto.

Le regole vale la pena memorizzare perché non sono sempre ovvie:

Alcune di queste sono famose. Number(null) è 0 ma Number(undefined) è NaN — i due valori "vuoti" si comportano diversamente. Anche una string vuota diventa 0, non NaN. Le string vengono prima private degli spazi circostanti, poi analizzate; se rimane qualcosa di non numerico, il risultato è NaN (che sta per "Not a Number").

Unario Plus

L'operatore unario plus è il modo più breve per forzare una conversione numerica. Posto davanti a un valore, +value fa esattamente quello che fa Number(value):

+"42";       // 42
+"";         // 0
+true;       // 1
+"abc";      // NaN

È comodo ma facile da fraintendere, quindi usalo nei posti in cui l'intento è chiaro (ad esempio +event.target.value quando si legge un campo numerico di un modulo).

parseInt e parseFloat vs Number

Number() è rigoroso: l'intera string deve essere un numero valido, altrimenti si ottiene NaN. Le funzioni parseInt() e parseFloat() sono più permissive — leggono dall'inizio della string e si fermano al primo carattere che non si adatta, restituendo ciò che hanno analizzato fino a quel punto.

Due avvertenze su parseInt:

• Restituisce NaN solo se la string non inizia con un numero analizzabile — "px12" fallisce, ma "12px" riesce con 12.
• Passa sempre la radice (base) come secondo argomento per evitare sorprese: parseInt("08", 10) dà 8 in modo affidabile. Senza di essa, i motori moderni assumono la base 10, ma essere espliciti rimuove qualsiasi dubbio e documenta le tue intenzioni.

parseInt("FF", 16);  // 255  (hexadecimal)
parseInt("101", 2);  // 5    (binary)
parseInt("08", 10);  // 8    (decimal, explicit radix)

Usa Number() (o +) quando vuoi validare che un intero valore sia numerico, e parseInt/parseFloat quando vuoi deliberatamente estrarre un numero dall'inizio di una string più lunga, come "24px" dal CSS.

Conversione in Boolean

La conversione in boolean risponde a una sola domanda: questo valore è "truthy" o "falsy"? Avviene esplicitamente con Boolean() e implicitamente ovunque venga valutata una condizione — all'interno di if, while, il ternario ?, e gli operatori logici.

La regola è rinfrescantemente semplice perché l'elenco dei valori falsy è breve e fisso. Questi otto valori si convertono in false:

false
0
-0
0n        // BigInt zero
""        // empty string
null
undefined
NaN

Tutto il resto è truthy. Questo "tutto il resto" include alcuni valori che sorprendono i principianti:

La string "0" è truthy perché è una string non vuota — il suo contenuto non conta. Analogamente "false" è una normale string non vuota e si converte in true. E un array vuoto [] o un object vuoto {} è truthy, anche se "sembra" vuoto. Memorizza l'elenco dei valori falsy; se un valore non è in quell'elenco, è truthy.

Coercizione Implicita

Finora abbiamo chiamato le funzioni di conversione noi stessi. La maggior parte delle conversioni nel mondo reale, però, sono implicite — il linguaggio coercisce i valori per far funzionare un'operazione. Il trucco è sapere quale tipo di destinazione si aspetta ogni contesto.

Aritmetica e la particolarità di +

Ogni operatore aritmetico coercisce i propri operandi in numeri — tranne +, che è sovraccarico. Se uno qualsiasi degli operandi di + è una string, + diventa concatenazione di string; altrimenti somma numeri. Ogni altro operatore (-, *, /, %) converte sempre in numeri.

La riga 1 + 2 + '3' mostra perché l'ordine conta: + è associativo a sinistra, quindi 1 + 2 viene eseguito prima come numeri (3), poi 3 + '3' incontra una string e concatena in "33". Questa regola unica — "+ con qualsiasi string concatena, tutto il resto converte in numero" — spiega gran parte della confusione dei principianti.

Condizioni e Logica

In qualsiasi contesto boolean — if, while, ?:, e gli operatori logici && / || — il valore di controllo viene passato attraverso la conversione in boolean usando l'elenco dei falsy descritto sopra.

if ("0") {
  // runs: "0" is a non-empty string, therefore truthy
}

if (0 || "fallback") {
  // "fallback" is returned: 0 is falsy, so || moves to the next value
}

Confronti

Gli operatori di uguaglianza hanno una propria coercizione, e in particolare l'operatore == (uguaglianza debole) ha regole abbastanza sottili da meritare un capitolo a parte. In breve: preferisci l'uguaglianza stretta ===, che non coercisce mai. L'insieme completo di sorprese (come [] == ![] che è true) è trattato in operatori di confronto.

Conversione da Object a Primitivo

Quando un object viene usato dove è atteso un primitivo (concatenazione, aritmetica, un messaggio di alert), JavaScript lo converte prima in un primitivo. Lo fa chiamando il metodo Symbol.toPrimitive dell'object se esiste; altrimenti ricade su valueOf() e toString(), scegliendo l'ordine in base al fatto che sia "suggerito" un numero o una string. Ecco perché un object semplice diventa "[object Object]" e un array diventa una string con elementi separati da virgole — queste provengono dal toString() predefinito. Puoi personalizzare il risultato definendo questi metodi sui tuoi object, ma per il codice quotidiano è sufficiente sapere che la conversione esiste e usare JSON.stringify() quando vuoi un object leggibile.

Insidie Comuni

Un numero ristretto di risultati di conversione è responsabile della maggior parte dei momenti "aspetta, cosa?". Tienili a mente:

Analizzando quelli più strani:

• +[] è 0. La conversione numerica trasforma prima l'array in una string (""), poi la string vuota si converte in 0.
• +{} è NaN. L'object diventa "[object Object]", che non è un numero valido, quindi si converte in NaN.
• "" + 1 è "1". Perché + ha incontrato una string, ha concatenato invece di sommare.
• [] + [] è "". Ogni array viene convertito in string vuota, e "" + "" è "".

Questi non sono bug — seguono esattamente le regole descritte sopra. Sembrano strani solo perché due conversioni diverse si concatenano in un'unica espressione.

Riepilogo

• JavaScript converte i valori in string, number o boolean — esplicitamente tramite String(), Number(), Boolean(), o implicitamente tramite coercizione.
• String: i primitivi vengono resi come testo; [1,2,3] diventa "1,2,3", [] diventa "", e un object semplice diventa "[object Object]".
• Number: null è 0, undefined è NaN, "" è 0; le string vengono prima private degli spazi poi analizzate rigorosamente. Usa +value come scorciatoia, e parseInt/parseFloat (con una radice) per l'analisi permissiva dall'inizio della string.
• Boolean: solo false, 0, -0, 0n, "", null, undefined e NaN sono falsy; tutto il resto — inclusi "0", "false", [] e {} — è truthy.
• + concatena quando uno dei lati è una string; ogni altro operatore aritmetico converte in numero.
• In caso di dubbio, converti esplicitamente e confronta con ===.

Userai queste regole costantemente quando lavorerai con i numeri, le string e l'input dell'utente memorizzato nelle variabili.

Metti alla Prova le Tue Conoscenze