Share
Velkommen til den andre delen av serien min om ECMAScript 6! En av mine favoritt nye webstandarder for Microsoft Edge, den nye nettleserenes reneringsmotor vi lager ved Microsoft, er den omfattende støtten den tilbyr for ECMAScript 6. Så jeg skrev denne serien for å gå gjennom noen av de kule tingene du kan gjøre med ECMAScript 6 når du skriver store applikasjoner på nettet.
I den første delen dekket jeg Klasse og Arv. I denne artikkelen vil jeg fokusere på malestrenger basert på min personlige erfaring med å lage innebygde uttrykk.
Når jeg jobber på Babylon.js, må jeg håndtere shaders kode som kan ses for forståelsens skyld, som en stor gjeng med tekst (som ser ut som C).
Du finner et eksempel i dette GitHub-depotet.
Problemet med å håndtere lang tekst i JavaScript er returlinjen. Hvor mange ganger har du skrevet denne typen ting?
var myTooLongString = "For lenge siden, i en galakse langt," + "langt unna ..." + "Det er en periode med borgerkrig." + "Rebel mellomrom, slående" + "fra en skjult base, har vunnet sin første seier mot" + "det onde galaktiske imperiet.";
Når du må jobbe med shaders som er 200 + linjer lange, blir dette raskt en reell smerte.
Heldigvis kommer ECMAScript 6 med den nye malestrengen. Blant andre underverker støtter en malstreng direkte multilinstrenger:
var myTooLongString = 'For lenge siden, i en galakse langt langt unna ... Det er en periode med borgerkrig. Rebel mellomrom, slående fra en skjult base, har vunnet sin første seier mot det onde galaktiske imperiet ';
Fordi alle tegn er signifikante innenfor en malstreng, kan jeg ikke legge til ledende hvite rom.
Nå som JavaScript-utviklere har vi tre måter å definere strenger på:
Multilinjestøtte er ikke den eneste funksjonen til malstrenger. Faktisk kan du også bruke template strenger til å erstatte plassholdere med variabler verdier, som du kanskje har gjort med printf i C / C + + eller string.Format i C #:
Accentsconagua
var elementer = []; items.push ( "banan"); items.push ( "tomato"); items.push ("light saber"); var totalt = 100,5; result.innerHTML = 'Du har $ items.length element (e) i handlekurven din for totalt $ total';Denne koden gir følgende utgang:
Du har 3 varer i handlekurven din for totalt $ 100.5
Ganske hendig, ikke sant?
Husk ECMAScript 5-måten:
result.innerHTML = "Du har" + items.length + "element (er) i handlekurven din for totalt $" + totalt;
Den endelige fasen av template strings spesifikasjon handler om å legge til en egendefinert funksjon før strengen selv for å lage en tagget mal streng:
var myUselessFunction = funksjon (strenger, ... verdier) var output = ""; for (var indeks = 0; indeks < 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';
Funksjonen her brukes til å få tilgang til både konstant strengdel og verdiene for evaluerte variabler.
I forrige eksempel er strenger og verdier følgende:
Som du ser, er alle verdier [n] omgitt av konstanterstrenger (strenger [n] og strenger [n + 1]).
Dette lar deg styre hvordan den endelige utdatastrengen er bygget. I mitt tidligere eksempel reproduserte jeg bare den grunnleggende oppførselen til malestrenger, men vi kan gå videre og legge til kul behandling på strengen din.
For eksempel, her er et stykke kode for å blokkere strenger som prøver å injisere egendefinerte DOM-elementer:
var elementer = []; items.push ( "banan"); items.push ( "tomato"); items.push ("light saber"); var total = "Prøver å kapre nettstedet ditt
"; var myTagFunction = funksjon (strenger, ... verdier) var output =" "; for (var index = 0; indeks < 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';Tagged template strings kan brukes til mange ting som sikkerhet, lokalisering, opprette ditt eget domenespesifikt språk, etc..
Tag-funksjoner har et spesielt valg når du får tilgang til strengerkonstanter: De kan bruke strings.raw for å få de unescaped strengverdiene. For eksempel, i dette tilfellet \ n vil ikke bli sett på som bare ett tegn, men faktisk to: \ og n.
Hovedmålet er å la deg få tilgang til strengen som den ble skrevet inn:
var myRawFunction = funksjon (strenger, ... verdier) var output = ""; for (var indeks = 0; indeks < 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';
Denne koden genererer følgende utdata:
Du har 3 varer i kurven din \ n.For totalt $ 100,5
Du kan også bruke en ny funksjon av String: String.raw (). Denne funksjonen er en innebygd funksjon som gjør akkurat hva mitt tidligere eksempel gjør:
result.innerHTML = String.raw 'Du har $ items.length element (e) i handlekurven din \ n.For totalt $$ total';
Microsoft Edge og de nyeste versjonene av Chrome (41+), Opera (28+) og Firefox (35+) støtter malestrenger, og du kan følge nivået på den generelle ECMAScript 6-støtten her. Så hvis du målretter mot den moderne nettsiden, er det ingen grunn til ikke å omfavne malestrenger.
For en fullstendig oversikt over hvilke nye webstandarder og funksjoner som kommer i Microsoft Edge-like WebAudio-kan du se hele listen på dev.modern.ie/platform/status.
Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Sjekk ut min egen:
Eller vårt lags læringsserie:
Og noen gratis verktøy: Visual Studio Community, Azure Trial, og tverrbrowser testing verktøy for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
