Tipurile de date și verificarea tipurilor sunt aspecte fundamentale ale oricărui limbaj de programare.

Multe limbaje de programare precum Java au verificări stricte de tip. Aceasta înseamnă că, dacă o variabilă este definită cu un anumit tip, aceasta poate conține o valoare de numai acel tip.

Cu toate acestea, JavaScript este un limbaj slab tastat (sau tastat dinamic). Aceasta înseamnă că o variabilă poate conține o valoare de orice tip. Codul JavaScript se poate executa astfel:

let one = 1;
one="one";
one = true;
one = Boolean(true);
one = String('It is possible');

Având în vedere acest lucru, este esențial să cunoașteți tipul unei variabile la un moment dat.

Tipul unei variabile este determinat de tipul valorii atribuite acesteia. JavaScript are un operator special numit typeof care vă permite să obțineți tipul oricărei valori.

În acest articol, vom afla cum typeof este folosit, împreună cu câteva gotchas de care trebuie să fii atent.

Tipuri de date JavaScript

Să aruncăm o privire rapidă asupra tipurilor de date JavaScript înainte de a intra în typeof operator.

În JavaScript, există șapte tipuri primitive. O primitivă este orice lucru care nu este un obiect. Sunt:

1. Şir
2. Număr
3. BigInt
4. Simbol
5. Boolean
6. nedefinit
7. nul

Orice altceva este un object – inclusiv inclusiv array și function. Un obiect este o colecție de perechi cheie-valoare.

Tipul JavaScript al Operatorului

typeof operatorul ia un singur operand (un operator unar). Evaluează tipul operandului și returnează rezultatul ca șir. Iată cum îl utilizați atunci când evaluați tipul unui număr, 007.

typeof 007;  // returns 'number'

Există o sintaxă alternativă pentru typeof operator unde îl puteți folosi ca un function:

typeof(operand)

Această sintaxă este utilă atunci când doriți să evaluați o expresie mai degrabă decât o singură valoare. Iată un exemplu în acest sens:

typeof(typeof 007); // returns 'string'

În exemplul de mai sus, expresia typeof 007 evaluează numărul de tip și returnează șirul „număr”. typeof('number') apoi rezultă 'string'.

Să ne uităm la un alt exemplu pentru a înțelege importanța parantezei cu typeof operator.

typeof(999-3223); // returns, "number"

Dacă omiteți paranteza, aceasta va reveni, NaN(Nu este un număr):

typeof 999-3223; // returns, NaN

Asta pentru că, mai întâi typeof 999 va avea ca rezultat un șir, „număr”. Expresia "number" - 32223 are ca rezultat NaN așa cum se întâmplă atunci când efectuați o operație de scădere între un șir și un număr.

Tip JavaScript de exemple

Următorul fragment de cod afișează rezultatul verificării tipului diferitelor valori folosind typeof operator.

typeof 0;  //'number'
typeof +0;  //'number'
typeof -0;  //'number'
typeof Math.sqrt(2);  //'number'
typeof Infinity;  //'number'
typeof NaN;  //'number', even if it is Not a Number
typeof Number('100');  //'number', After successfully coerced to number
typeof Number('Routech');  //'number', despite it can not be coerced to a number

typeof true;  //'boolean'
typeof false;  //'boolean'
typeof Boolean(0);  //'boolean'

typeof 12n;  //'bigint'

typeof '';  //'string'
typeof 'Routech';  //'string'
typeof `Routech is awesome`;  //'string'
typeof '100';  //'string'
typeof String(100); //'string'

typeof Symbol();  //'symbol'
typeof Symbol('Routech');  //'symbol'

typeof {blog: 'Routech', author: 'Tapas A'};  //'object';
typeof ['This', 'is', 101]; //'object'
typeof new Date();  //'object'
typeof Array(4);  //'object'

typeof new Boolean(true);  //'object'; 
typeof new Number(101);  //'object'; 
typeof new String('Routech');  //'object';
typeof new Object;  //'object'

typeof alert;  //'function'
typeof function () {}; //'function'
typeof (() => {});  //'function' - an arrow function so, parenthesis is required
typeof Math.sqrt;  //'function'

let a;
typeof a;  //'undefined'
typeof b;  //'undefined'
typeof undefined;  //'undefined'

typeof null;  //'object'

Tabelul de mai jos prezintă valorile de verificare de tip ale typeof:

Obișnuite comune cu typeof

Există cazuri în care typeof este posibil ca operatorul să nu returneze tipurile la care vă așteptați. Acest lucru poate provoca confuzie și erori. Iată câteva cazuri.

Tipul de NaN este un număr

typeof NaN;  //'number', even if it is Not a Number

typeof NaN este 'number'. Acest lucru este ciudat, deoarece nu ar trebui să detectăm un NaN folosind typeof. Există modalități mai bune de a face față acesteia. Îi vom vedea peste un minut.

Tipul de null este obiectul

  typeof null;  //'object'

În JavaScript, typeof null este un obiect care dă o impresie greșită că, null este un obiect în care este o valoare primitivă.

Acest rezultat al typeof null este de fapt un bug în limbă. S-a făcut o încercare de remediere în trecut, dar a fost respinsă din cauza problemei de compatibilitate inversă.

Tipul unei variabile nedeclarate este nedefinit

Înainte de ES6, o verificare de tip a unei variabile nedeclarate utilizate pentru a rezulta 'undefined'. Dar acesta nu este un mod sigur de a face față erorilor.

Cu ES6 putem declara variabile cu domeniu de bloc cu let sau const Cuvinte cheie. Dacă le folosiți cu typeof operator înainte de a fi inițializate, vor arunca un ReferenceError.

 typeof cat; // ReferenceError
 let cat="brownie"; 

Tipul unei funcții constructor este un obiect

Toate funcțiile constructorului, cu excepția Function constructor, va fi întotdeauna typeof ‘obiect’.

typeof new String('Routech'); //'object'

Acest lucru poate duce la o anumită confuzie, deoarece ne așteptăm să fie tipul real (în exemplul de mai sus, a string tip).

Tipul unei matrice este un obiect

Deși corect din punct de vedere tehnic, acesta ar putea fi cel mai dezamăgitor. Vrem să facem diferența între o matrice și un obiect chiar dacă o matrice este tehnic un obiect în JavaScript.

typeof Array(4);  //'object'

Din fericire există modalități de a detecta corect o matrice. Vom vedea asta în curând.

Dincolo typeof – Verificare mai bună a tipului

Acum că am văzut câteva dintre limitările cu typeof operator, să vedem cum să le remediem și să facem o verificare mai bună a tipului.

Cum se detectează NaN

În JavaScript, NaN este o valoare specială. Valoarea NaN reprezintă rezultatul unei expresii aritmetice care nu poate fi reprezentată de fapt. De exemplu,

let result = 0/0;
console.log(result);  // returns, NaN

De asemenea, dacă efectuăm orice operații aritmetice cu NaN, va rezulta întotdeauna într-un NaN.

console.log(NaN + 3); // returns, NaN

Verificarea tipului pe NaN folosind typeof operatorul nu ajută prea mult deoarece returnează tipul ca 'number'. JavaScript are o funcție globală numită isNaN() pentru a detecta dacă un rezultat este NaN.

isNaN(0/0); // returns, true

Dar există și o problemă aici.

isNaN(undefined); // returns true for 'undefined'

În ES6, metoda isNaN() se adaugă la global Number obiect. Această metodă este mult mai fiabilă și deci este cea preferată.

Number.isNaN(0/0); // returns, true
Number.isNaN(undefined); // returns, false

Un alt aspect interesant al NaN este că este singura valoare JavaScript care nu este niciodată egală cu alte valori, inclusiv ea însăși. Deci, acesta este un alt mod de a detecta NaN pentru mediile în care ES6 nu este acceptat:

function isNaN (input) {
  return input !== input;
}

Cum se detectează nul în JavaScript

Am văzut, detectând nul folosind typeof operatorul este confuz. Modul preferat de a verifica dacă ceva este nul este folosind operatorul strict de egalitate (===).

function isNull(input) {
 return input === null;
}

Asigurați-vă că nu utilizați == din greseala. Folosind == in locul === va duce la detectarea tipului înșelător.

Cum să detectați o matrice în JavaScript

De la ES6 înainte, putem detecta o matrice folosind Array.isArray metodă.

Array.isArray([]); // returns true
Array.isArray({}); // returns false

Înainte de ES6, am putea folosi instanceof operator pentru a determina o matrice:

function isArray(input) {
  return input instanceof Array;
}

O soluție generică pentru a tasta Verificarea în JavaScript

Există o modalitate prin care putem crea o soluție generică pentru verificarea tipurilor. Uită-te la metodă, Object.prototype.toString. Acest lucru este foarte puternic și extrem de util pentru scrierea unei metode de utilitate pentru verificarea tipului.

Cand Object.prototype.toString este invocat folosind call() sau apply(), returnează tipul obiectului în format: [object Type]. Type partea din valoarea returnată este tipul real.

Să vedem cum funcționează cu câteva exemple:

// returns '[object Array]'
Object.prototype.toString.call([]); 

// returns '[object Date]'
Object.prototype.toString.call(new Date()); 

// returns '[object String]'
Object.prototype.toString.call(new String('Routech'));

// returns '[object Boolean]'
Object.prototype.toString.call(new Boolean(true));

// returns '[object Null]'
Object.prototype.toString.call(null);

Deci, asta înseamnă că, dacă luăm doar șirul de returnare și scoatem Type parte, vom avea tipul real. Iată o încercare de a face acest lucru:

function typeCheck(value) {
  const return_value = Object.prototype.toString.call(value);
  // we can also use regex to do this...
  const type = return_value.substring(
           return_value.indexOf(" ") + 1, 
           return_value.indexOf("]"));

  return type.toLowerCase();
}

Acum, putem folosi typeCheck funcție pentru a detecta tipurile:

typeCheck([]); // 'array'
typeCheck(new Date()); // 'date'
typeCheck(new String('Routech')); // 'string'
typeCheck(new Boolean(true)); // 'boolean'
typeCheck(null); // 'null'

În concluzie

Pentru a rezuma ceea ce am învățat în acest articol:

• Verificarea tipului JavaScript nu este la fel de strictă ca alte limbaje de programare.
• Folosește typeof operator pentru detectarea tipurilor.
• Există două variante ale typeof sintaxa operatorului: typeof și typeof(expression).
• Rezultatul unui typeof operatorul poate fi uneori înșelător. Trebuie să ne bazăm pe alte metode disponibile (Number.isNaN, Array.isArry, și așa mai departe) în aceste cazuri.
• Putem folosi Object.prototype.toString pentru a crea o metodă generică de detectare a tipului.

Înainte să terminăm …

Vă mulțumim că ați citit până aici! Să ne conectăm. Puteți să-mi continuați Twitter (@tapasadhikary) cu comentarii.

S-ar putea să vă placă și aceste alte articole:

• JavaScript nedefinit și nul: Să vorbim despre asta pentru ultima oară!
• JavaScript: Compararea egalității cu ==, === și Object.is
• Cuvântul cheie JavaScript `this` + 5 reguli de legare cheie explicate pentru începători JS

Asta este tot pentru acum. Ne revedem în curând cu următorul meu articol. Până atunci, te rog să ai grijă de tine.