Share
ES6 er fremtiden for JavaScript, og det er allerede her. Det er en ferdig spesifikasjon, og det gir mange funksjoner et språk krever for å forbli konkurransedyktig med webens behov nå. Ikke alt i ES6 er for deg, og i denne lille serie innlegg vil jeg vise funksjoner som er veldig praktiske og allerede brukbare.
Hvis du ser på JavaScript-kode jeg har skrevet, vil du oppdage at jeg alltid bruker enkle anførselstegn til å definere strenge i stedet for dobbelte anførselstegn. JavaScript er OK med enten-de følgende to eksemplene gjør akkurat det samme:
var dyr = "ku"; var dyr = 'ku';
Årsaken til at jeg foretrekker enkelt anførselstegn er at det først og fremst gjør det enklere å sette sammen HTML-strenger med riktig sitater på den måten:
// med enkelt anførselstegn, er det ikke nødvendig å // unnslippe sitatene rundt klassen verdi var men = ''; // dette er en syntaksfeil: var men = ""; // dette fungerer: var men ="";
Den eneste gangen du trenger å rømme nå er når du bruker et enkelt sitat i HTML-en din, noe som burde være en svært sjelden anledning. Det eneste jeg kan tenke på er inline JavaScript eller CSS, noe som betyr at du er veldig sannsynlig å gjøre noe skyggefullt eller desperat til oppslaget ditt. Selv i tekstene dine, er du sannsynligvis bedre ikke å bruke et enkelt sitat, men det typografisk mer behagelig ".
Bortsett: HTML er selvfølgelig tilgivende nok til å utelate sitatene eller bruke enkle sitater rundt et attributt, men jeg foretrekker å lage lesbar markering for mennesker i stedet for å stole på tilgivelse av en parser. Vi gjorde HTML5-parseren tilgivende fordi folk skrev forferdelig markup i fortiden, ikke som en unnskyldning for å fortsette å gjøre det.
Jeg har lidd nok i DHTML-dager i document.write, lager et dokument inne i rammesett i et nytt popup-vindu og andre vederstyggeligheter, for ikke å bruke fluktkarakteren noen gang igjen. Til tider trengte vi tredoble seg, og det var selv før vi hadde fargekoding i våre redaktører. Det var et rot.
En annen grunn til at jeg foretrekker enkle anførselstegn er at jeg skrev mye PHP i min tid for svært store nettsteder der ytelsen betydde mye. I PHP er det en forskjell mellom enkelt og dobbelt anførselstegn. Enkeltnoterte strenger har ingen substitusjon i dem, mens dobbeltkvitede gjør. Det betydde tilbake i dagene i PHP 3 og 4 at det var mye raskere å bruke enkle anførselstegn, da parseren ikke måtte gå gjennom strengen for å erstatte verdier. Her er et eksempel på hva det betyr:
Dyret er $ dyr og dets lyd er $ sound echo "Dyret er $ dyr og lyden er $ lyd"; // => Dyret er ku og lyden er moo?>
JavaScript hadde ikke denne substitusjonen, og derfor måtte vi sammenkoble strenger for å oppnå det samme resultatet. Dette er ganske uhåndterlig, siden du må hoppe inn og ut av sitater hele tiden.
Accentsconagua
var dyr = 'ku'; var lyd = 'moo'; varsling ('dyret er' + dyr + 'og lyden er' + lyd '); // => "Dyret er ku og lyden er veldig"Dette blir veldig rotete med lengre og mer komplekse strenger og spesielt når vi samler mye HTML. Og mest sannsynlig vil du før eller senere ende opp med linting-verktøyet ditt, og klage om bakre hvittrom etter en + på slutten av en linje. Dette er basert på problemet at JavaScript ikke har flere linjestrenge:
// dette virker ikke var list = '
For å jobbe rundt rotet som er strenghåndtering og sammenkobling i JavaScript, gjorde vi det vi alltid gjør - vi skrev et bibliotek. Det er mange HTML templating biblioteker, med Mustache.js trolig å ha vært den første. Alle disse følger sin egen, ikke-standardiserte syntaks og arbeider i denne tankegangen. Det er litt som å si at du skriver innholdet ditt i Markdown og deretter innser at det er mange forskjellige ideer om hva "Markdown" betyr.
Med adventen til ES6 og standardiseringen kan vi glede oss da JavaScript nå har et nytt barn i blokken når det gjelder håndtering av strenge: Template Strings. Støtten til malstrenger i nåværende nettlesere er oppmuntrende: Chrome 44+, Firefox 38+, Microsoft Edge og WebKit er alle om bord. Safari, dessverre nok, er ikke, men det kommer der.
Geni av malestrenger er at den bruker en ny strengavgrenser, som ikke er i bruk enten i HTML eller i vanlige tekster: backticket (').
Ved å bruke denne har vi nå strengekspresjonssubstitusjon i JavaScript:
var dyr = 'ku'; var lyd = 'moo'; varsling ('Dyret er $ animal og lyden er $ lyd'); // => "Dyret er ku og lyden er veldig" De $ konstruksjon kan ta noen JavaScript-uttrykk som returnerer en verdi. Du kan for eksempel gjøre beregninger, eller få tilgang til egenskapene til en objekt:
var ut = 'ti ganger to er totalt $ 10 * 2'; // => "ti ganger to er totalt 20" var dyr = navn: 'ku', ilk: 'bovine', foran: 'moo', tilbake: 'melk', varsel ('The $ animal.name er av $ animal.ilk ilk, den ene enden er for $ animal.front, den andre for $ animal.back '); // => / * Kua er av oksekjøtt, den ene enden er for moo, den andre for melken * / Det siste eksempelet viser også at flere linjestrenge ikke lenger er et problem.
En annen ting du kan gjøre med template strenger, er å prepend dem med en tag, som er navnet på en funksjon som kalles og får strengen som en parameter. For eksempel kan du kode den resulterende strengen for nettadresser uten å måtte ty til den horridly navngitte encodeURIComponent hele tiden.
funksjon urlify (str) return encodeURIComponent (str); urlify 'http://beedogs.com'; // => "%%% %%% 2Fbeedogs.com" urlify "woah $ £ $% £ ^ $" '; // => "woah% 24% C2% A3% 24% 25% C2% A3% 5E % 24% 22 "// nesting fungerer også: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Dette fungerer, men er avhengig av implisitt array-to-string tvang. Parameteren som sendes til funksjonen, er ikke en streng, men en rekke strenger og verdier. Hvis brukt slik jeg viser her, blir den omgjort til en streng for enkelhets skyld, men den riktige måten er å få tilgang til gruppemedlemmene direkte.
Inne i tag-funksjonen kan du ikke bare få hele strengen, men også dens deler.
funksjonstegn (strenger, verdier) console.log (strenger); console.log (verdier); console.log (strenger [1]); tag 'deg $ 3 + 4 det'; / * => Array ["deg", "det"] 7 det * /
Det finnes også en rekke av de raske strengene som tilbys til deg, noe som betyr at du får alle tegnene i strengen, inkludert kontrolltegn. Si for eksempel at du legger til en linjeskift med \ n. Du får den dobbelte hvite plass i strengen, men \ n tegn i de rå strengene:
funksjonstegn (strenger, verdier) console.log (strenger); console.log (verdier); console.log (strenger [1]); console.log (string.raw [1]); tag 'deg $ 3 + 4 \ nit'; / * => Array ["deg", "det"] 7 det \ nit * /
Template strenger er en av de nifty små seier i ES6 som kan brukes akkurat nå. Hvis du må støtte eldre nettlesere, kan du selvsagt spore ES6 til ES5; Du kan gjøre en funksjonstest for støtte for malstrenger ved hjelp av et bibliotek som featuretests.io eller med følgende kode:
var templatestrings = false; prøv ny funksjon ("'2 + 2'"); templatestrings = true; fangst (err) templatestrings = false; hvis (templatestrings) // ... Her er noen flere artikler om malstrenger:
Denne artikkelen er en del av webutviklingsserien fra Microsoft tech evangelister om praktisk JavaScript-læring, åpen kildekodeprosjekter, og beste praksis for interoperabilitet, inkludert Microsoft Edge-nettleseren og den nye EdgeHTML-gjengemotoren.
Vi oppfordrer deg til å teste på tvers av nettlesere og enheter, inkludert Microsoft Edge, standardleseren for Windows 10, med gratis verktøy på dev.modern.IE:
Dybde teknisk læring på Microsoft Edge og webplattformen fra våre ingeniører og evangelister:
Flere gratis plattformverktøy og ressurser for webplattformen:
