Kuinka muotoilet merkkijonon JavaScriptissä?

JavaScriptissä merkkijono on joukko merkkejä, jotka on suljettu joko kerta- tai kaksoislainausmerkkeihin. JavaScriptissä on monia tapoja muotoilla merkkijonoja.

Voit käyttää tiettyjä menetelmiä tai operaattoreita merkkijonojen yhdistämiseen. Voit jopa suorittaa tiettyjä toimintoja päättääksesi, mikä merkkijono näkyy missä ja milloin.

Opi muotoilemaan JavaScript-merkkijonojasi ketjutusmenetelmillä ja malliliteraaaleilla.

Merkkijonojen ketjutus

JavaScript mahdollistaa merkkijonojen yhdistämisen useilla eri tavoilla. Hyödyllinen lähestymistapa on concat() menetelmä. Tämä menetelmä käyttää kahta tai useampaa merkkijonoa. Se käyttää yhtä kutsumerkkijonoa ja ottaa yhden tai useamman merkkijonon argumentteina.

const etunimi = "John";
const sukunimi = "Doe";
antaa stringVal;
stringVal = etunimi.concat("", sukunimi);
konsoli.log (stringVal);

Tässä concat yhdistää merkkijonoargumentit (tyhjä välilyönti ja sukunimi) kutsuvaan merkkijonoon (etunimi). Koodi tallentaa sitten tuloksena olevan uuden merkkijonon muuttujaan (stringVal) ja tulostaa uuden arvon selainkonsoliin:

Toinen tapa ketjuttaa merkkijonokokoelma on käyttää plus-operaattoria. Tämän menetelmän avulla voit yhdistää merkkijonomuuttujia ja merkkijonoliteraaaleja uusien merkkijonojen luomiseksi.

const etunimi = "John";
const middleName = "Mike";
const sukunimi = "Doe";
antaa stringVal;
stringVal = etunimi + "" + MiddleName + "" + sukunimi;
konsoli.log (stringVal);

Yllä oleva koodi tulostaa seuraavan tulosteen konsoliin:

Kolmas lähestymistapa JavaScript-merkkijonojen yhdistämiseen edellyttää plus- ja yhtäläisyysmerkin käyttöä. Tämän menetelmän avulla voit lisätä uuden merkkijonon olemassa olevan merkkijonon loppuun.

const etunimi = "John";
const sukunimi = "Doe";
antaa stringVal;
stringVal = etunimi;
stringVal += "";
stringVal += sukunimi;
konsoli.log (stringVal);

Tämä koodi lisää välilyönnin ja LastName-muuttujan arvon firstName-muuttujaan, jolloin saadaan seuraava tulos:

Mallin kirjaimet

Malliliteraalit ovat ES6-ominaisuus, jonka avulla voit muotoilla JavaScript-merkkijonoja. Malliliteraali käyttää merkkijonojen näyttämiseen backticks-paria (`). Tämän merkkijonomuotoilun avulla voit näyttää selkeämpiä monirivisiä merkkijonoja JavaScriptissä.

antaa html;
html = `<ul>
<li> Nimi: John Doe </li>
<li> Ikä: 24 </li>
<li> Työ: Ohjelmistoinsinööri </li>
</ul>`;
asiakirja.body.innerHTML = html;

Yllä oleva JavaScript-koodi käyttää HTML tulostaaksesi kolmen kohteen luettelon selaimeen:

Jos haluat saavuttaa saman tuloksen ilman malliliteraaaleja (tai ennen malliliteraaaleja), sinun on käytettävä lainausmerkkejä. Et kuitenkaan voisi laajentaa koodia useille riveille, kuten voit käyttää malliliteraaaleja.

antaa html;
html = "<ul><li>Nimi: John Doe</li><li>Ikä: 24</li><li>Työ: Ohjelmistoinsinööri</li></ul>";
asiakirja.body.innerHTML = html;

Merkkijonojen interpolointi

Malliliteraalien avulla voit käyttää lausekkeita JavaScript-merkkijonoissasi interpolaatioksi kutsutun prosessin avulla. Merkkijonointerpoloinnilla voit upottaa lausekkeita tai muuttujia merkkijonoihin käyttämällä ${expression} paikanpitäjä. Tässä JavaScript-mallin literaalien arvo tulee todella ilmeiseksi.

anna käyttäjänimi = "Jane Doe";
antaa ikä = 21;
anna töitä = "Web-kehittäjä";
antaa kokemus = 3;
antaa html;
html = `<ul>
<li> Nimi: ${userName} </li>
<li> Ikä: ${age} </li>
<li> Työnimike: ${job} </li>
<li> Vuosien kokemus: ${experience} </li>
<li> Kehittäjätaso: ${kokemus < 5? "Juniorista keskitasoon": "Vanhempi"} </li>
</ul>`;
asiakirja.body.innerHTML = html;

Yllä oleva koodi tuottaa seuraavan tulosteen konsolissa:

Ensimmäiset neljä argumenttia ${expression} paikkamerkit ovat merkkijonomuuttujia, mutta viides on ehdollinen lauseke. Lauseke perustuu yhden muuttujan arvoon (kokemus), joka määrää, mitä sen tulee näyttää selaimessa.

Web-sivusi elementtien muotoilu JavaScriptillä

Sen lisäksi, että JavaScript liittyy toiminnallisesti verkkosivujen kehittämiseen, se toimii HTML: n kanssa ja vaikuttaa verkkosivun suunnitteluun ja ulkoasuun. Se voi manipuloida verkkosivulla näkyvää tekstiä, kuten malliliteraalien tapauksessa.

Se voi jopa muuntaa HTML: n kuviksi ja näyttää ne verkkosivulla.