Share
ES6 este viitorul JavaScript și este deja aici. Este o specificație terminată și aduce o mulțime de caracteristici pe care le impune o limbă pentru a rămâne competitivă cu nevoile web de acum. Nu totul în ES6 este pentru tine, și în această mică serie de posturi voi arăta caracteristici care sunt foarte la îndemână și deja utilizabile.
Dacă te uiți la codul JavaScript pe care l-am scris, veți găsi că întotdeauna folosesc citate simple pentru a defini șiruri de caractere în loc de ghilimele duble. JavaScript este OK cu oricare dintre următoarele două exemple fac exact același lucru:
var animal = "vacă"; var animal = "vaca";
Motivul pentru care prefer citatele simple este că, în primul rând, este mai ușor să asamblezi șiruri HTML cu atribute cotate în mod corespunzător, astfel:
// cu citare simple, nu este nevoie să // scapați de ghilimele în jurul valorii de clasă var but = '„; // aceasta este o eroare de sintaxă: var but = ""; // aceasta funcționează: var but ="„;
Singura dată când trebuie să scăpați acum este atunci când utilizați o singură cotație în HTML, care ar trebui să fie o ocazie foarte rară. Singurul lucru la care mă pot gândi este JavaScript sau CSS inline, ceea ce înseamnă că ești foarte probabil să faci ceva umbrite sau disperat pentru marcarea ta. Chiar și în textele tale, ești probabil mai bine să nu folosești o singură citare, ci mai tipic ".
În afară: Desigur, HTML este destul de iertător pentru a omite ghilimelele sau pentru a folosi citate unice în jurul unui atribut, dar prefer să creez marcă lizibilă pentru oameni, nu să se bazeze pe iertarea unui parser. Am făcut parserul HTML5 iertând pentru că oamenii au scris marcări teribile în trecut, nu ca o scuză pentru a continua să facă acest lucru.
Am suferit destul în zilele de document.write ale DHTML, creând un document în interiorul unui set de cadre într-o fereastră pop-up nouă și în alte urâciuni, pentru a nu mai dori să utilizeze din nou caracterul de evadare. Uneori, aveam nevoie de triple, și asta a fost chiar înainte de a avea coduri de culoare în editorii noștri. A fost o mizerie.
Un alt motiv pentru care prefer citatele unice este că am scris o mulțime de PHP în timpul meu pentru site-uri web foarte mari, în care performanța a avut o importanță deosebită. În PHP, există o diferență între ghilimele simple și cele duble. Corzile citate unice nu au nici o substituție în ele, în timp ce dublu-cotate fac. Asta însemna că, în zilele din PHP 3 și 4, că utilizarea citatelor simple a fost mult mai rapidă, deoarece parserul nu trebuia să treacă prin șir pentru a înlocui valorile. Iată un exemplu de ceea ce înseamnă:
Animalul este $ animal și sunetul lui este echivalent cu sunetul "animalul este $ animal și sunetul lui sună"; // => Animalul este vacă și sunetul este moo?>
JavaScript nu a avut această substituție, motiv pentru care a trebuit să concatenăm șiruri de caractere pentru a obține același rezultat. Acest lucru este destul de greu, deoarece trebuie să intrați și să ieșiți din citate tot timpul.
Accentsconagua
var animal = "vaca"; var sound = 'moo'; alertă ("Animalul este" + animal + "și sunetul său este" + sunet "); ///> "Animalul este vacă și sunetul lui este moo"Acest lucru devine într-adevăr dezordonat cu șiruri mai lungi și mai complexe și mai ales atunci când asamblează o mulțime de cod HTML. Și, cel mai probabil, veți ajunge mai devreme sau mai târziu cu ajutorul instrumentului de lustruire care se plânge de spațiile albe după un + la sfârșitul unei linii. Aceasta se bazează pe problema că JavaScript nu are șiruri de mai multe linii:
// aceasta nu funcționează var list = '
Pentru a rezolva mizeria care este manipularea și concatenarea șirului în JavaScript, am făcut ceea ce facem întotdeauna - am scris o bibliotecă. Există numeroase biblioteci de template-uri HTML, probabil că Mustache.js a fost unul seminal. Toate acestea urmează propria sintaxă nestandardizată și lucrează în acest cadru al minții. Este un pic ca să spui că vă scrieți conținutul în Markdown și apoi realizând că există multe idei diferite despre ceea ce înseamnă "Markdown".
Odată cu apariția ES6 și a standardizării sale, ne putem bucura că JavaScript are acum un nou copil pe bloc atunci când vine vorba de manipularea șirurilor de caractere: șir de șabloane. Suportul șirurilor șablon în browserele curente este încurajator: Chrome 44+, Firefox 38+, Microsoft Edge și WebKit sunt la bord. Safari, din păcate, nu este, dar va ajunge acolo.
Geniul șirului de șabloane este acela că utilizează un nou delimiter de șir, care nu este folosit nici în HTML, nici în textele normale: backtick (').
Folosind aceasta vom avea acum o substituție a expresiei șir în JavaScript:
var animal = "vaca"; var sound = 'moo'; alertă ("Animalul este $ animal și sunetul său este $ sound"); ///> "Animalul este vacă și sunetul lui este moo" $ construct poate lua orice expresie JavaScript care returnează o valoare. Puteți, de exemplu, să efectuați calcule sau să accesați proprietățile unui obiect:
var out = 'de zece ori două total este $ 10 * 2'; ///> "zece ori două total este de 20" var animal = nume: "cow", ilk: "bovine", față: 'moo', back: 'lapte', alert este de $ animal.ilk ilk, un capăt este pentru $ animal.front, celălalt pentru $ animal.back '); // => / * Vaca este de bovine ilk, un cap este pentru moo, celălalt pentru lapte * /
Acest ultim exemplu vă arată, de asemenea, că șirurile cu mai multe linii nu reprezintă deloc o problemă.
Un alt lucru pe care îl puteți face cu șirul de șabloane este să le prefixați cu o etichetă, care este numele unei funcții care este numită și primește șirul ca parametru. De exemplu, ați putea codifica șirul rezultat pentru URL-uri fără a fi nevoie să recurgeți la numele oribil encodeURIComponent tot timpul.
funcția urlify (str) return encodeURIComponent (str); urlify 'http://beedogs.com'; ///> "http% 3A% 2F% 2Fbeedogs.com" urlify 'woah $ £ $% £ ^ $' '; // => "woah% 24% C2% A3% 24% 25% C2% A3% % 24% 22 "// cuiburile funcționează de asemenea: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Acest lucru funcționează, dar se bazează pe coerciția implicită de tip array-to-string. Parametrul trimis funcției nu este un șir, ci o serie de șiruri de caractere și valori. Dacă se folosește modul pe care îl prezint aici, devine convertit într-un șir pentru comoditate, dar modul corect este de a accesa direct membrii matricei.
În interiorul funcției de etichetare puteți obține nu numai șirul complet, ci și piesele sale.
tag-ul funcției (șiruri, valori) console.log (șiruri de caractere); console.log (valori); console.log (coarde [1]); etichetați "$ 3 + 4"; / * => Array ["tu", "acesta"] 7 it * /
Există, de asemenea, o serie de șiruri de caractere brute furnizate dvs., ceea ce înseamnă că veți obține toate caracterele din șir, inclusiv caractere de control. Spuneți, de exemplu, că adăugați o pauză de linie cu \ n. Veți obține dubluul spațiu în șir, dar \ n caractere din șirurile prime:
tag-ul funcției (șiruri, valori) console.log (șiruri de caractere); console.log (valori); console.log (coarde [1]); console.log (string.raw [1]); etichetați '$ 3 + 4 \ nit'; / * => Array ["tu", "acesta"] 7 it \ nit * /
Șirurile de șablon sunt una dintre acele victorii minuscule în ES6 care pot fi folosite chiar acum. Dacă trebuie să sprijiniți browserele mai vechi, puteți, bineînțeles, să transpilați ES6 în ES5; puteți efectua un test de caracteristică pentru suport șir de șabloane folosind o bibliotecă ca featuretests.io sau cu următorul cod:
var templatestrings = false; încercați nouă funcție ("2 + 2" "); templatestrings = true; captură (err) templatestrings = false; dacă (șir de șabloane) // ... Iată câteva articole despre șirul de șabloane:
Acest articol face parte din seria de dezvoltări web de la evangheliștii tehnici Microsoft privind învățarea JavaScript practică, proiectele open source și cele mai bune practici de interoperabilitate, inclusiv browserul Microsoft Edge și noul motor de randare EdgeHTML.
Vă încurajăm să testați printre browsere și dispozitive, inclusiv Microsoft Edge - browserul implicit pentru Windows 10 - cu instrumente gratuite pe dev.modern.IE:
Învățarea tehnică în profunzime pe Microsoft Edge și Platforma Web de la inginerii și evangheliștii noștri:
Mai multe instrumente și resurse gratuite pentru platformă Web:
