Share
ES6 is de toekomst van JavaScript en het is er al. Het is een voltooide specificatie en het brengt veel functies die een taal nodig heeft om concurrerend te blijven met de behoeften van het web van nu. Niet alles in ES6 is voor jou, en in deze kleine reeks berichten zal ik functies laten zien die erg handig en al bruikbaar zijn.
Als je kijkt naar JavaScript-code die ik heb geschreven, zul je zien dat ik altijd enkele aanhalingstekens gebruik om strings te definiëren in plaats van dubbele aanhalingstekens. JavaScript is ook in orde: de volgende twee voorbeelden doen precies hetzelfde:
var animal = "cow"; var animal = 'cow';
De reden waarom ik de voorkeur geef aan enkele aanhalingstekens is dat het in de eerste plaats eenvoudiger is HTML-reeksen samen te stellen met correct geciteerde kenmerken:
// met enkele aanhalingstekens is het niet nodig om // te ontsnappen aan de aanhalingstekens rond de klassewaarde var, maar = ''; // dit is een syntaxisfout: var but = ""; // dit werkt: var but ="";
De enige keer dat u nu moet ontsnappen, is wanneer u één enkele quote in uw HTML gebruikt, wat een zeer zeldzame gelegenheid zou moeten zijn. Het enige dat ik kan bedenken is inline JavaScript of CSS, wat betekent dat je heel waarschijnlijk iets schaduwigs of wanhopigs aan je markup doet. Zelfs in je teksten ben je waarschijnlijk beter af om geen enkel citaat te gebruiken, maar het typografisch meer aangename '.
Terzijde: HTML is natuurlijk vergevingsgezind genoeg om de aanhalingstekens weg te laten of om enkele aanhalingstekens rond een attribuut te gebruiken, maar ik maak liever leesbare opmaak voor mensen dan te vertrouwen op de vergevingsgezindheid van een parser. We hebben de HTML5-parser vergevingsgezind gemaakt omdat mensen in het verleden vreselijke markeringen hebben geschreven, niet als een excuus om dit te blijven doen.
Ik heb in de DHTML-dagen van document.write genoeg geleden, waardoor ik een document in een frameset in een nieuw pop-upvenster en andere gruwelen heb gemaakt, om het escape-teken nooit meer te willen gebruiken. Soms hadden we drievoudige nodig, en dat was nog voordat we kleurcodering hadden in onze editors. Het was een troep.
Een andere reden waarom ik de voorkeur geef aan enkele aanhalingstekens, is dat ik in mijn tijd veel PHP schreef voor zeer grote websites waar prestaties van groot belang waren. In PHP is er een verschil tussen enkele en dubbele aanhalingstekens. Enkel-geciteerde reeksen hebben geen enkele substitutie, terwijl dubbel geciteerde wel degelijk voorkomen. Dat betekende in de dagen van PHP 3 en 4 dat het gebruik van enkele aanhalingstekens veel sneller was, omdat de parser niet door de reeks hoefde te gaan om waarden te vervangen. Hier is een voorbeeld van wat dat betekent:
Het dier is $ dier en het geluid is $ geluidsecho "Het dier is $ dier en het geluid is $ geluid"; // => Het dier is koe en het geluid is moo?>
JavaScript had deze vervanging niet, daarom moesten we tekenreeksen samenvoegen om hetzelfde resultaat te bereiken. Dit is vrij onpraktisch, want je moet altijd in en uit citaten springen.
Accentsconagua
var animal = 'cow'; var sound = 'moo'; alert ('Het dier is' + dier + 'en het geluid is' + geluid); // => "Het dier is koe en het geluid is moo"Dit wordt erg rommelig met langere en complexere strings en vooral wanneer we veel HTML assembleren. En hoogstwaarschijnlijk zul je vroeg of laat eindigen met je plukgereedschap dat na een + aan het einde van een regel klaagt over achterblijvende witruimte. Dit is gebaseerd op het probleem dat JavaScript geen multi-line strings heeft:
// dit werkt niet var list = '
Om de rotzooi die string-afhandeling en aaneenschakeling is in JavaScript te omzeilen, hebben we gedaan wat we altijd doen: we hebben een bibliotheek geschreven. Er zijn veel HTML templating-bibliotheken, waarvan Moustache.js waarschijnlijk de belangrijkste is. Al deze volgen hun eigen, niet-gestandaardiseerde syntaxis en werken in die gemoedstoestand. Het is een beetje alsof je zegt dat je je inhoud in Markdown schrijft en je vervolgens realiseert dat er veel verschillende ideeën zijn over wat 'markdown' betekent.
Met de komst van ES6 en zijn standaardisatie kunnen we ons verheugen omdat JavaScript nu een nieuw kind in huis heeft als het gaat om het afhandelen van strings: Template Strings. De ondersteuning van sjabloonkoorden in de huidige browsers is bemoedigend: Chrome 44+, Firefox 38+, Microsoft Edge en WebKit zijn allemaal aan boord. Safari is helaas niet genoeg, maar het komt wel.
Het genie van sjabloonkoorden is dat het een nieuw stringscheidingsteken gebruikt, dat noch in HTML noch in normale teksten wordt gebruikt: de backtick (').
Met behulp van deze hebben we nu string expressie substitutie in JavaScript:
var animal = 'cow'; var sound = 'moo'; alert ('Het dier is $ animal en het geluid is $ sound'); // => "Het dier is koe en het geluid is moo" De $ construct kan elke JavaScript-uitdrukking nemen die een waarde retourneert. U kunt bijvoorbeeld berekeningen uitvoeren of eigenschappen van een object openen:
var out = 'tien keer twee totaal is $ 10 * 2'; // => "tien keer twee totaal is 20" var animal = naam: 'cow', ilk: 'bovine', front: 'moo', back: 'milk', alert ('The $ animal.name is van de $ animal.ilk ilk, het ene uiteinde is voor de $ animal.front, de andere voor de $ animal.back '); // => / * De koe is van het rundgenoten, het ene uiteinde is voor het moo, het andere voor de melk * / Dat laatste voorbeeld laat ook zien dat multi-line strings helemaal geen probleem meer zijn.
Een ander ding dat je kunt doen met sjabloonkoorden is om ze vooraf te voorzien van een tag, de naam van een functie die wordt aangeroepen en krijgt de tekenreeks als parameter. U kunt bijvoorbeeld de resulterende tekenreeks coderen voor URL's zonder toevlucht te nemen tot de vreselijke naam encodeURIComponent altijd.
function 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 "// nesten werkt ook: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Dit werkt, maar vertrouwt op impliciete array-naar-string dwang. De parameter die naar de functie wordt verzonden, is geen tekenreeks, maar een reeks tekenreeksen en waarden. Indien gebruikt zoals ik hier laat zien, wordt het voor het gemak geconverteerd naar een tekenreeks, maar de juiste manier is om rechtstreeks toegang te krijgen tot de arrayleden.
Binnen de tag-functie kun je niet alleen de volledige string maar ook de bijbehorende delen krijgen.
functietag (strings, waarden) console.log (strings); console.log (waarden); console.log (strings [1]); tag 'you $ 3 + 4 it'; / * => Array ["you", "it"] 7 it * /
Er is ook een array met de onbewerkte strings die aan u is verstrekt, wat betekent dat u alle tekens in de tekenreeks krijgt, inclusief besturingspersonages. Stel dat u bijvoorbeeld een regeleinde toevoegt met \ n. Je krijgt de dubbele witruimte in de string, maar de \ n tekens in de onbewerkte tekenreeksen:
functietag (strings, waarden) console.log (strings); console.log (waarden); console.log (strings [1]); console.log (string.raw [1]); tag 'you $ 3 + 4 \ nit'; / * => Array ["you", "it"] 7 it \ nit * /
Sjabloonstrings zijn een van die handige kleine winsten in ES6 die nu kunnen worden gebruikt. Als je oudere browsers moet ondersteunen, kun je natuurlijk je ES6 naar ES5 transponeren; u kunt een functietest uitvoeren voor sjabloonkoordondersteuning met een bibliotheek zoals featuretests.io of met de volgende code:
var templatestrings = false; probeer nieuwe functie ("'2 + 2'"); templatestrings = true; catch (err) templatestrings = false; if (templatestrings) // ... Hier zijn wat meer artikelen over sjablonen voor sjablonen:
Dit artikel maakt deel uit van de webontwikkelingsserie van Microsoft-techevangelisten over praktisch JavaScript-leren, open-sourceprojecten en best practices voor interoperabiliteit, waaronder Microsoft Edge-browser en de nieuwe EdgeHTML-weergavemotor.
We raden u aan om te testen op verschillende browsers en apparaten, waaronder Microsoft Edge, de standaardbrowser voor Windows 10, met gratis hulpprogramma's op dev.modern.IE:
Diepgaande technologische kennis van Microsoft Edge en het webplatform van onze ingenieurs en evangelisten:
Meer gratis platformonafhankelijke hulpprogramma's en bronnen voor het webplatform:
