Share
ES6 är framtiden för JavaScript och det är redan här. Det är en färdig specifikation, och det ger många funktioner som ett språk kräver för att vara konkurrenskraftigt med webens behov nu. Inte allt i ES6 är för dig, och i denna lilla serie av inlägg kommer jag att visa funktioner som är mycket praktiska och redan användbara.
Om du tittar på JavaScript-kod som jag har skrivit, kommer du att finna att jag alltid använder enkla citat för att definiera strängar istället för dubbla citat. JavaScript är OK med antingen-följande två exempel gör exakt samma sak:
var djur = "ko"; var djur = "ko";
Anledningen till att jag föredrar enkla citat är att det först och främst gör det enklare att montera HTML-strängar med korrekt citerade attribut på så sätt:
// med enkla citat, det finns ingen anledning att // flytta citaten runt klassvärdet var men = ''; // Detta är ett syntaxfel: var men = ""; // det här fungerar: var men ="";
Den enda gången du behöver fly nu är när du använder ett enda citat i din HTML, vilket borde vara ett mycket sällsynt tillfälle. Det enda jag kan tänka på är inline JavaScript eller CSS, vilket innebär att du är mycket sannolikt att göra något skuggigt eller desperat för din uppmärksamhet. Även i dina texter är du förmodligen bättre att inte använda ett enda citat men typografiskt mer tilltalande ".
Bortsett: HTML är givetvis tillräckligt förlåtande för att utesluta citat eller använda enkla citat runt ett attribut, men jag föredrar att skapa läsbar markering för människor istället för att förlita sig på en parsers förlåtelse. Vi gjorde HTML5-parsern förlåtande eftersom folk skrev hemskt markup i det förflutna, inte som en ursäkt för att fortsätta att göra det.
Jag har lidit tillräckligt i DHTML-dagarna i document.write, skapar ett dokument i en ramsätt i ett nytt popup-fönster och andra avskyvärden, för att inte vilja använda escape-tecknet någonsin igen. Ibland behövde vi trefaldiga, och det var även innan vi hade färgkodning i våra redaktörer. Det var en röra.
En annan anledning till att jag föredrar enkla citattecken är att jag skrev mycket PHP i min tid för mycket stora webbplatser där prestanda betydde mycket. I PHP finns skillnaden mellan enkla och dubbla citat. Singel-citerade strängar har ingen substitution i dem, medan dubbla citerade gör. Det betydde tillbaka i dagarna i PHP 3 och 4 att användandet av enkla citat var mycket snabbare, eftersom parsern inte behövde gå igenom strängen för att ersätta värden. Här är ett exempel på vad det betyder:
Djuret är $ djur och dess ljud är $ sound echo "Djuret är $ djur och dess ljud är $ sound"; // => Djuren är ko och dess ljud är moo?>
JavaScript hade inte denna substitution, varför vi var tvungna att sammanfoga strängar för att uppnå samma resultat. Det här är ganska obehagligt, eftersom du måste hoppa in och ut ur citat hela tiden.
Accentsconagua
var djur = "ko"; var ljud = 'moo'; varning ("djuret är" + djur + "och dess ljud är + ljud); // => "Djuret är ko och dess ljud är moo"Detta blir riktigt rörigt med längre och mer komplexa strängar och speciellt när vi monterar mycket HTML. Och sannolikt kommer du förr eller senare att sluta med ditt lintingverktyg som klagar på efterföljande whitespace efter en + i slutet av en rad. Det här är baserat på problemet att JavaScript inte har några strängar på flera linjer:
// det här fungerar inte var list = '
För att kunna fungera runt det som är stränghantering och sammankoppling i JavaScript gjorde vi vad vi alltid gör - vi skrev ett bibliotek. Det finns många HTML-templerande bibliotek, med Mustache.js som troligen varit den främsta. Alla dessa följer sin egen, icke-standardiserade syntax och arbetar i den sinnesramen. Det är som att säga att du skriver ditt innehåll i Markdown och sedan inser att det finns många olika idéer om vad "Markdown" betyder.
Med ankomsten av ES6 och dess standardisering kan vi glädjas eftersom JavaScript nu har ett nytt barn i blocket när det gäller hantering av strängar: Mallsträngar. Stöd av mallsträngar i nuvarande webbläsare är uppmuntrande: Chrome 44+, Firefox 38+, Microsoft Edge och WebKit är alla ombord. Safari, tyvärr nog, är inte, men det kommer dit.
Geni av mallsträngar är att det använder en ny strängavgränsare, som inte används antingen i HTML eller i vanliga texter: backtick (').
Med hjälp av denna har vi nu stränguttrycksubstitution i JavaScript:
var djur = "ko"; var ljud = 'moo'; varning ('Djuret är $ animal och dess ljud är $ sound'); // => "Djuret är ko och dess ljud är moo" De $ konstruera kan ta något JavaScript-uttryck som returnerar ett värde. Du kan till exempel göra beräkningar eller åtkomst till egenskaper för ett objekt:
var ut = 'tio gånger två totalt är $ 10 * 2'; // => "tio gånger två totalt är 20" var djur = namn: "ko", ilk: "nötkreatur", framsidan: "moo", tillbaka: "mjölk", varning ("$ animal.name är av $ animal.ilk ilk, ena änden är för $ animal.front, den andra för $ animal.back '); // => / * Koen är av nötkreaturen ilk, den ena änden är för moo, den andra för mjölken * / Det sista exemplet visar också att flera strängar inte längre är ett problem.
En annan sak du kan göra med mallsträngar är att förordna dem med en tagg, vilket är namnet på en funktion som heter och får strängen som en parameter. Till exempel kan du koda den resulterande strängen för webbadresser utan att behöva tillgripa den horridly namngivna encodeURIComponent hela tiden.
funktion urlify (str) return encodeURIComponent (str); Urlify 'http://beedogs.com'; // => "http% 3A% 2F% 2Fbeedogs.com" urlify "woah $ £ $% £ ^ $" '; // => "woah% 24% C2% A3% 24% 25% C2% A3% 5E % 24% 22 "// nesting fungerar också: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Detta fungerar, men bygger på implicit array-to-string tvång. Parametern som skickas till funktionen är inte en sträng utan en rad strängar och värden. Om den används som jag visar här konverteras den till en sträng för enkelhets skyld, men det rätta sättet är att få tillgång till arraymedlemmarna direkt.
Inuti taggfunktionen kan du inte bara få hela strängen utan även dess delar.
funktionstangent (strängar, värden) console.log (strängar); console.log (värden); console.log (strings [1]); tag 'du $ 3 + 4 det'; / * => Array ["du", "det"] 7 det * /
Det finns också en rad av de råa strängarna som du får, vilket innebär att du får alla tecken i strängen, inklusive kontrolltecken. Säg till exempel att du lägger till en radbrytning med \ n. Du kommer att få dubbelt vitt utrymme i strängen, men \ n tecken i de råa strängarna:
funktionstangent (strängar, värden) console.log (strängar); console.log (värden); console.log (strings [1]); console.log (string.raw [1]); tag 'du $ 3 + 4 \ nit'; / * => Array ["du", "det"] 7 det \ nit * /
Mall strängar är en av de fina små vinsterna i ES6 som kan användas just nu. Om du måste stödja äldre webbläsare kan du självklart sända din ES6 till ES5; Du kan göra ett funktionstest för mallsträngsupport med hjälp av ett bibliotek som featuretests.io eller med följande kod:
var templatestrings = false; prova ny funktion ("'2 + 2'"); templatestrings = true; fånga (err) templatestrings = false; om (templatestrings) // ... Här är några fler artiklar om mallsträngar:
Denna artikel är en del av webbutvecklingsserien från Microsoft tech evangelister om praktisk JavaScript-lärande, öppen källprojekt och bästa praxis för driftskompatibilitet, inklusive Microsoft Edge-webbläsaren och den nya EdgeHTML-reningsmotorn.
Vi uppmuntrar dig att testa över webbläsare och enheter, inklusive Microsoft Edge-standardwebbläsaren för Windows 10-med gratisverktyg på dev.modern.IE:
Fördjupat tekniskt lärande på Microsoft Edge och webbplattformen från våra ingenjörer och evangelister:
Fler gratis plattformsverktyg och resurser för webbplattformen:
