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:
- Şir
- Număr
- BigInt
- Simbol
- Boolean
- nedefinit
- 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
:
TIP | VALOR DE RETURARE A TIPULUI |
---|---|
Şir | 'string' |
Număr | 'number' |
BigInt | 'bigint' |
Simbol | 'symbol' |
Boolean | 'boolean' |
nedefinit | 'undefined' |
Obiect funcție | 'function' |
nul |
'object' (Vezi mai jos!) |
Orice alte obiecte | 'object' |
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
șitypeof(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.