PricingLoginStart free
JavaScript Academy · Oppitunti

Tagitettujen templatejen käytännön käyttötapaukset

Rakentakaa turvallista HTML:ää ja tyyliteltyjä merkkijonoja tagien avulla.

Oppitunti 4/413 vaihetta

Tagitettujen templatejen käytännön käyttötapaukset on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Tagien käyttö käytännössä

Tagitetut template-literaalit ovat monien kirjastojen perusta: niitä käytetään HTML:n escapointiin, styled components -komponentteihin, GraphQL-kyselyihin ja i18n-toteutuksiin. Yhteinen ajatus on käsitellä interpoloidut arvot turvallisesti.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

Escapoinnin ongelma

Kun muodostatte HTML:ää käyttäjän syötteestä, erikoismerkit, kuten pienempi kuin -merkki, voivat lisätä joukkoon merkkausta. Tagifunktio voi escapata nämä merkit automaattisesti vain interpoloiduista arvoista.

const danger = "<script>"
console.log("raw: " + danger)

Escape-apufunktio

Määrittelemme ensin apufunktion, joka korvaa vaaralliset merkit turvallisilla HTML-entiteeteillä.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Turvallinen HTML-tagi

Rakennamme nyt tagin, joka escapaa jokaisen interpoloidun arvon mutta jättää staattiset mallineen osat ennalleen, koska ne ovat peräisin luotetulta kehittäjältä.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Miksi staattiset osat säilyvät käsittelemättöminä

Vain interpoloidut arvot ovat epäluotettavaa käyttäjän dataa. Kehittäjä kirjoittaa mallineen literaaliosat itse, joten niitä ei escapata ja tarkoitettu merkkaus toimii oikein.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Muotoillun tulosteen tagi

Toinen toimintamalli ympäröi interpoloidut arvot muotoilumerkeillä, esimerkiksi raportin lukujen korostamiseksi.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Kyselymerkkijonojen muodostaminen

Tageilla voidaan koodata URL-osoitteiden arvoja escapaten jokaisen interpoloidun osan, jolloin staattinen rakenne säilyy ehjänä ja data koodataan turvallisesti.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Monikkomuotojen käsittely

Tagi voi tutkia arvoa ja muuttaa ympäröivää tekstiä, esimerkiksi valita yksikkö- tai monikkomuodon.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Sisennyksen poistaminen

Tagit voivat siistiä monirivisiä mallineita poistamalla jokaisen rivin alusta ylimääräisen sisennyksen ja tuottamalla siistin tulosteen.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Tagien yhdistäminen

Toimintaa voidaan rakentaa kerroksittain antamalla yhden tagin kutsua apufunktioita. Tässä tagi sekä ympäröi arvot että korostaa ne.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Milloin tageja ei kannata käyttää

Yksinkertaisille merkkijonoille tavallinen template-literaali riittää. Käyttäkää tagifunktiota vain, kun interpoloiduille arvoille tarvitaan yhdenmukainen muunnos, kuten escapointi tai lokalisointi.

const name = "Lee"
console.log("Welcome, " + name)

Pikatesti

Testatkaa käytännön tagitietonne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kertaus: Tagitetut template-literaalit mahdollistavat turvallisen ja muotoillun tulosteen.

  • Escapatkaa HTML-turvallisuuden varmistamiseksi vain interpoloidut arvot
  • Staattiset osat säilyvät luotettuina ja käsittelemättöminä
  • Käyttäkää tageja muotoiluun, koodaukseen ja monikkomuotojen käsittelyyn
  • Suosikaa tavallisia literaaleja, kun muunnosta ei tarvita
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))
Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
59
Oppitunnit
200
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tagitettujen templatejen käytännön käyttötapaukset” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tagitettujen templatejen käytännön käyttötapaukset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tagitettujen templatejen käytännön käyttötapaukset”?

Rakentakaa turvallista HTML:ää ja tyyliteltyjä merkkijonoja tagien avulla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Tagitettujen templatejen käytännön käyttötapaukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Merkkijonojen interpoloinnin perusteet
  2. Moniriviset merkkijonot
  3. Tagitetut template-funktiot
  4. Tagitettujen templatejen käytännön käyttötapaukset
← Takaisin: JavaScript Academy