Típuskonverzió ebben a kurzusban:

A(z) Típuskonverzió fogalomról

A JavaScriptben az értékek különböző típusúak lehetnek. Egy változó típusát explicit típuskonverzióval változtathatod meg. Ezen kívül a JavaScript automatikus típuskonverziót (implicit típuskonverziót) is végez, amikor a kontextus megkívánja.

Típuskonverzió

A JavaScriptnek, sok más nyelvvel ellentétben, nincs olyan szerkezete, amellyel egy értéket (más) típusba alakíthatnál, helyette viszont néhány beépített segédeszközt használhatsz. Leginkább a globális Boolean, Number és String objektumok használhatók függvényként, hogy egy értéket a megfelelő típusra alakítsanak.

Átalakítás Boolean típusra (truthy/falsy értékek)

A Boolean(value) segítségével bármely értéket Boolean értékké alakíthatsz. Hogyan is működik ez?

Létezik egy rögzített értékhalmaz, az úgynevezett falsy értékek, amelyek false-ra értékelődnek. A legfontosabbak: a false, a 0, az üres string, a null, az undefined és a NaN mind falsy. A teljes listát az MDN „Falsy” című cikke mutatja.

Minden más értékre a Boolean true-t ad vissza. Ezeket nevezzük truthy értékeknek.

Boolean(-1);
// => true

Boolean(0);
// => false

Boolean(' ');
// => true

Boolean('');
// => false

Figyeld meg, hogy a leírt szabályok miatt a '0', a 'false', a [] és a {} truthy érték a JavaScriptben.

Átalakítás számmá

A Number(value) segítségével egy értéket számmá alakíthatsz. A string elején és végén lévő whitespace karaktereket figyelmen kívül hagyja, az üres stringet pedig 0-vá alakítja. Ha nem primitív értéket vagy olyan stringet próbálsz átalakítani, amely nem számot reprezentál, nem fog hibát dobni. Ehelyett az eredmény NaN (Not-A-Number) lesz.

Number('  -12.34  ');
// => -12.34

Number('1,2');
// => NaN

Number('1 2');
// => NaN

Number('');
// => 0

Number('10e3');
// => 10000

Number({ key: '123' });
// => NaN

Alább láthatod, mit ad vissza a Number más primitív értékekre.

Number(true);
// => 1

Number(false);
// => 0

Number(null);
// => 0

Number(undefined);
// => NaN

Vedd észre, hogy az utolsó példával ellentétben a Number() argumentum nélkül hívva definíció szerint 0-t ad vissza.

A JavaScript emellett a parseInt és a parseFloat függvényt is kínálja. Ezek lazább szabályokat alkalmaznak arra nézve, hogy mely stringek alakíthatók számmá. Ezért a váratlan eredmények elkerülésére inkább a Number függvényt érdemes használni konverzióra.

parseInt('123a45');
// => 123

Number('123a45');
// => NaN

Átalakítás stringgé

A String(value) segítségével egy értéket stringgé alakíthatsz. Primitív értékeknél az eredmény az lesz, amire számítasz.

String(12.34);
// => '12.34'

String(false);
// => 'false'

String(null);
// => 'null'

String(undefined);
// => 'undefined'

Tömböknél a String függvény minden elemre elvégzi a stringgé alakítást, majd az eredményeket vesszővel fűzi össze. A join metódust magad is meghívhatod, például hogy testre szabd az elválasztót. Ezekben az esetekben azonban a null és az undefined üres stringgé alakul.

String([42, null, true, 'abc']);
// => '42,,true,abc'

Objektumoknál a String alapértelmezés szerint egy nem túl hasznos szöveget ad vissza.

String({ key: 'value' });
// => '[object Object]'

A konverzió viselkedését testre szabhatod, például egy toString metódus megadásával. A javascript.info „Objektum primitív értékké alakítása” szakasza részletesen elmagyarázza.

Egy másik gyakori módja annak, hogy az objektumok és tömbök szebb string reprezentációt kapjanak, a JSON-kódolás használata. A JSON.stringify segítségével stringgé alakíthatsz, a JSON.parse-szal pedig vissza objektummá vagy tömbbé.

const obj = {
  name: 'Gilda Guerra',
  address: {
    city: 'Goiânia',
  },
};

JSON.stringify(obj);
// => '{"name":"Gilda Guerra","address":{"city":"Goiânia"}}'

Automatikus típuskonverzió

Bizonyos kontextusokban a JavaScript automatikusan átalakít egy értéket egy másik adattípusra, mielőtt kiértékelne egy utasítást. Ezt az implicit átalakítást nevezzük automatikus típuskonverziónak.

Boolean-kontextus

Amikor egy érték Boolean-kontextusba kerül, a JavaScript ugyanazokat a szabályokat alkalmazza, mint a Boolean függvény, hogy implicit módon átalakítsa az értéket.

• Ha egy elágazás feltétele nem Boolean, akkor automatikus típuskonverzió dönti el, hogy a feltétel teljesül-e vagy sem. Ugyanez érvényes a ternáris operátor ? első operandusára.

  const num = 0;
  if (num) {
    // this block is NOT executed because 0 is falsy
  }
  
  const name = 'Jin';
  name ? 'name was provided' : 'no name provided';
  // => 'name was provided'
  

• A logikai NOT operátor ! operandusa is Boolean értékké alakul, mielőtt a tagadás megtörténik.

  const name = '';
  !name;
  // => true
  

  A leírt viselkedés következménye, hogy a !!value ugyanolyan hatású, mint a Boolean(value). Az olvashatóság kedvéért mégis a Boolean használata javasolt.

• A JavaScript a logikai AND (&&) és OR (||) operátorok operandusaira is alkalmaz konverziót. Tartsd azonban észben, hogy a kifejezés eredménye nem feltétlenül Boolean. A kifejezés az eredeti operandusok egyikét adja vissza (lásd az MDN-t a logikai operátorokról).

  null || 'hello';
  // => 'hello'
  

String-kontextus

Ha az összeadás + operátorát primitív értékekre használod, és az egyik operandus string, akkor a másik is stringgé alakul. A konverzió logikája ugyanaz, mint a String függvény használatakor. Ezután a két string összefűződik.

let name;
'hello ' + name;
// => 'hello undefined'

Ugyanez az implicit konverzió történik a template stringekbe ágyazott nem string értékekkel is.

const degrees = 23;
`It is ${degrees} °C`;
// => 'Is is 23 °C.';

Numerikus kontextus

Sok operátor számmá alakítja az operandusokat (ha szükséges), a fentebb bemutatott Number függvény logikája szerint.

• Aritmetikai operátorok: + (ha nincs benne string), -, *, /, %, **
• Egyoperandusú plusz és negáció operátorok: +, -
• Relációs operátorok (nem string operandusokra): >, >=, <, <=
• Bitenkénti operátorok: |, &, ^, ~

Ha bármelyik operátorról többet szeretnél tudni, nézd meg az MDN operátorlistáját.

Ha egy operandusról elképzelhető, hogy string, a hibák elkerülésére a legjobb mindig explicit módon a Number függvénnyel átalakítani.

'1' + '2';
// => '12'
// addition operator in string context as explained above

Number('1') + Number('2');
// => 3

Néha találkozhatsz azzal, hogy az egyoperandusú plusz operátort string számmá alakítására használják. Ez nem ajánlott, mert sokkal nehezebben olvasható, mint az explicit Number hívás.

const value = '42';
+value;
// => 42

Number(value);
// => 42

A laza egyenlőség- és egyenlőtlenség-operátorok (==/!=) használata is gyakran jár implicit számmá alakítással. Ezeknek az operátoroknak a pontos logikája azonban meglehetősen bonyolult (lásd az MDN-t a laza egyenlőségről). Az eredmények nehezen jelezhetők előre, és néha nem azt kapod, amire számítasz. Az ilyen implicit konverziók elkerülésére inkább a szigorú egyenlőség/egyenlőtlenség operátorokat (===/!==) használd.