Share
Bine ați venit în a doua parte a seriei mele despre ECMAScript 6! Unul dintre noile mele standarde preferate de Microsoft Edge, noul motor de redare a browser-ului pe care îl creăm la Microsoft, este suportul extins pe care îl oferă pentru ECMAScript 6. Deci am scris această serie pentru a vă ajuta să faceți niște lucruri minunate pe care le puteți face cu ECMAScript 6 când scrieți aplicații mari pentru web.
În prima tranșă, am acoperit clasa și moștenirea. În acest articol, mă voi concentra asupra șirurilor de șabloane bazate pe experiența mea personală care creează expresii încorporate.
Când lucrez la Babylon.js, trebuie să mă ocup de codul shaders care poate fi văzut, de dragul înțelegerii, ca o grămadă de text (care arată ca C).
Puteți găsi un exemplu în acest depozit GitHub.
Problema când se ocupă de text lung în JavaScript este returnarea liniei. De câte ori ați scris astfel de lucruri?
var myTooLongString = "Cu mult timp în urmă, într-o galaxie departe" + "departe ..." + "Este o perioadă de război civil". + "Nave spațiale Rebel, izbitoare" + "de la o bază ascunsă, au câștigat" + "prima lor victorie împotriva" + "Imperiul galactic rău";
Când trebuie să lucrați cu shadere lungi de 200 de linii, aceasta devine repede o adevărată durere.
Din fericire, ECMAScript 6 vine cu noua caracteristică șir de șabloane. Printre alte minuni, șirul șablon acceptă în mod direct șiruri de mai multe linii:
var myTooLongString = 'Cu mult timp în urmă, într-o galaxie foarte departe ... Este o perioadă de război civil. Regele spațiale, izbucnind dintr-o bază ascunsă, și-au câștigat prima victorie împotriva imperiului galactic rău ";
Deoarece toate caracterele sunt semnificative într-un șir de șabloane, nu pot adăuga spații principale.
Acum ca dezvoltatori JavaScript avem trei moduri de a defini șiruri de caractere:
Suportul multi-linie nu este singura caracteristică a șirurilor de șablon. Într-adevăr, puteți utiliza șiruri de șabloane pentru a înlocui înlocuitorii cu valori variabile, așa cum s-ar fi întâmplat printf în C / C ++ sau string.Format în C #:
Accentsconagua
var items = []; items.push ( "banana"); items.push ( "roșii"); items.push ("sabie lumină"); var total = 100,5; result.innerHTML = 'Aveți articole de $ items.length în coșul dvs. pentru un total de $ total';Acest cod produce următoarea ieșire:
Aveți 3 articole în coș pentru un total de $ 100.5
Destul de la îndemână, corect?
Amintiți-vă de modul ECMAScript 5:
result.innerHTML = "Aveți" + items.length + "item (s) în coșul dvs. pentru un total de $" + total;
Etapa finală a caietului de sarcini șablon șir este de a adăuga o funcție personalizată înainte de șirul de sine pentru a crea o etichetat șir șablon:
var myUselessFunction = funcția (șiruri, valori ...) var output = ""; pentru (var index = 0; index < values.length; index++) output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myUselessFunction 'You have $items.length item(s) in your basket for a total of $$total';
Funcția de aici este folosită pentru a obține acces atât la partea string constantă cât și la valorile variabilelor evaluate.
În exemplul anterior, șirurile și valorile sunt următoarele:
După cum puteți vedea, fiecare valoare [n] este înconjurată de șiruri de caractere (șiruri [n] și șiruri de caractere [n + 1]).
Acest lucru vă permite să controlați modul în care este construit șirul final de ieșire. În exemplul meu precedent, am reprodus doar comportamentul de bază al șirurilor de șabloane, dar putem merge mai departe și putem adăuga o prelucrare rece pe șirul.
De exemplu, aici este o bucată de cod pentru blocarea șirurilor care încearcă să injecteze elemente DOM personalizate:
var items = []; items.push ( "banana"); items.push ( "roșii"); items.push ("sabie lumină"); var total = "Încercarea de a-ți deturna site-ul
"var myTagFunction = funcția (șiruri, valori ...) var output =" "; pentru (var index = 0; index < values.length; index++) var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) // Far more complex tests can be implemented here :) return "String analyzed and refused!"; output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myTagFunction 'You have $items.length item(s) in your basket for a total of $$total';Etichetele șablon șablon pot fi utilizate pentru o mulțime de lucruri, cum ar fi securitatea, localizarea, crearea propriului limbaj de domeniu propriu, etc.
Funcțiile de etichete au o opțiune specială atunci când accesează constantele de caractere: pot folosi strings.raw pentru a obține valorile șirului neevaporat. De exemplu, în acest caz \ n nu va fi văzută ca un singur caracter, ci în realitate două: \ și n.
Scopul principal este să vă permiteți să accesați șirul așa cum a fost introdus:
var myRawFunction = funcția (șiruri, valori ...) var output = ""; pentru (var index = 0; index < values.length; index++) output += strings.raw[index] + values[index]; output += strings.raw[index] console.log(strings.length, values.length); return output; result.innerHTML = myRawFunction 'You have $items.length item(s) in your basket\n.For a total of $$total';
Acest cod generează următoarea ieșire:
Aveți 3 articole în coșul dvs. \ nPentru un total de $ 100.5
De asemenea, puteți utiliza o nouă funcție de String: String.raw (). Această funcție este o funcție încorporată care face exact ceea ce face exemplul meu anterior:
result.innerHTML = String.raw 'Aveți $ items.length articole în coșul dvs. \ n.Pentru un total de $ total';
Microsoft Edge și cele mai recente versiuni de fire Chrome (41+), Opera (28+) și Firefox (35+), și puteți urmări nivelul general al asistenței ECMAScript 6 aici. Deci, dacă vizați web-ul modern, nu există nici un motiv să nu îmbrățișezi șiruri de șablon.
Pentru o vizualizare completă a noilor standarde și funcții web care apar în WebAudio, cum ar fi Microsoft Edge, puteți vedea lista completă la dev.modern.ie/platform/status.
S-ar putea să vă surprindă puțin, dar Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem într-o misiune de a crea mult mai mult cu Microsoft Edge. Check out-ul meu:
Sau seria de învățare a echipei noastre:
Și câteva instrumente gratuite: Visual Studio Community, Azure Trial și instrumente de testare cross-browser pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
