Vue Academy · Oppitunti

Monikkomuodot ja linkitetyt viestit

Monikkomuotosäännöt @:key|@:key-syntaksilla, määrään perustuva monikkomuoto ja linkitetyt viestit @:path-polulla

Oppitunti 3/413 vaihetta

Monikkomuodot ja linkitetyt viestit on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Lukumäärät riippuvat kielestä

"1 kohde", mutta "5 kohdetta" — ja joissakin kielissä muotoja on vielä enemmän. Monikkojen kirjoittaminen suoraan johtaa kömpelöihin merkkijonoihin, kuten "5 kohde(tta)". Vue I18n sisältää monikkomuotoilun, joka valitsee lukumäärälle oikean muodon.

Pystyviivalla erotetut monikkomuodot

Kirjoittakaa muodot yhteen viestimerkkijonoon ja erottakaa ne pystyviivalla (|). Englannissa käytetään yleensä kahta tai kolmea muotoa.

const en = {
  items: "no items | one item | {count} items",
}

Monikkomuodon valitseminen lukumäärän avulla

Välittäkää luku t-funktion toisena argumenttina. Vue I18n valitsee lukumäärän perusteella sitä vastaavan muodon.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

Oletusarvoinen monikkosääntö

Kolmen muodon tapauksessa sääntö on seuraava: 0 käyttää ensimmäistä, 1 toista ja kaikki muut luvut kolmatta muotoa. Kahdella muodolla 0 ja suuremmat luvut käyttävät samaa muotoa.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

{count}-paikanhaltija

Monikkoviestin erityinen {count}- (tai {n}-) paikanhaltija täytetään välittämällänne luvulla, joten voitte näyttää lukumäärän.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Monikot templateissa

Käyttäkää templateissa $t-funktiota ja välittäkää lukumäärä toisena argumenttina aivan kuten skriptissä.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Lukumäärän ja nimettyjen arvojen yhdistäminen

Voitte välittää sekä lukumäärän että nimetyt paikanhaltijat antamalla lukumäärän ja arvojen objektin.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

Mitä linkitetyt viestit ovat?

Joskus yhden käännöksen pitää sisältää toinen käännös toiston välttämiseksi. Linkitetyt viestit viittaavat toiseen avaimeen syntaksilla @:.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Linkin ratkaiseminen

Kun käännätte avaimen welcome, tunnus @:brand korvataan avaimen brand käännetyllä arvolla. Kun muutatte brand-arvoa kerran, kaikki linkitetyt viestit päivittyvät.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

Linkittäminen sisäkkäisillä avaimilla

Linkit toimivat myös pisteillä erotettujen sisäkkäisten avainten kanssa. Ympäröikää monisanaiset viittaukset tarvittaessa sulkeilla.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Linkkien muokkaimet

Linkitetyt viestit tukevat muokkaimia, kuten @.upper, joilla linkitetyn arvon muotoa voidaan muuttaa (isot kirjaimet, pienet kirjaimet, alkukirjain isolla).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

Pikatarkistus

Tarkistakaa, miten hyvin ymmärrätte monikot ja linkit.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte monikot ja viestien uudelleenkäytön:

Erottakaa monikkomuodot merkillä |: "no items | one item | {count} items".
Välittäkää lukumäärä kutsulla t(key, count) oikean muodon valitsemista varten.
{count}-paikanhaltija näyttää lukumäärän.
Linkitetyt viestit käyttävät uudelleen toista avainta syntaksilla @:otherKey (sisäkkäisiin avaimiin syntaksilla @:(nested.key)).
Muokkaimet, kuten @.upper, muuttavat linkitetyn arvon muotoa.

Aloita maksutta

Opi HTML 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: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Monikkomuodot ja linkitetyt viestit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Monikkomuodot ja linkitetyt viestit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Monikkomuodot ja linkitetyt viestit”?

Monikkomuotosäännöt @:key|@:key-syntaksilla, määrään perustuva monikkomuoto ja linkitetyt viestit @:path-polulla Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

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

Kuinka kauan ”Monikkomuodot ja linkitetyt viestit”-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ä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue 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

vue-i18n:n käyttöönotto ja viestitiedostot
useI18n-composable ja t()-funktio
Monikkomuodot ja linkitetyt viestit
Lukujen, päivämäärien ja valuuttojen muotoilu

← Takaisin: Vue Academy