JavaScript-merkkijonomenetelmät


Sisällysluettelo

    Näytä sisällysluettelo

String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()

Huomautus

Merkkijono hakumenetelmät käsitellään seuraavassa luvussa.


JavaScript-merkkijonon pituus

Ominaisuus length palauttaa merkkijonon pituuden:

Esimerkki

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>


String-osien purkaminen

On 3 tapaa poimia merkkijonon osa:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript-merkkijono slice()

slice() purkaa osan merkkijonosta ja palauttaa purettu osa uuteen merkkijonoon.

Menetelmässä on 2 parametria: aloituskohta ja loppukohta (loppu ei sisälly).

Esimerkki

Leikkaa osa merkkijonosta kohdasta 7 kohtaan 13:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part; 
</script>

</body>
</html>


Huomautus

JavaScript laskee paikat nollasta.

Ensimmäinen sijoitus on 0.

Toinen sijoitus on 1.

Esimerkkejä

Jos ohitat toisen parametrin, menetelmä leikkaa loput merkkijonosta:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string from position 7:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>


Jos parametri on negatiivinen, sijainti lasketaan merkkijonon lopusta:

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string counting from the end:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>


Tämä esimerkki leikkaa osan merkkijonosta paikasta -12 kohtaan -6:

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string and return the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>




JavaScript-merkkijono alimerkkijono()

alamerkkijono() on samanlainen kuin slice().

Erona on, että alku- ja loppuarvoja, jotka ovat pienempiä kuin 0, käsitellään 0 tuumana alamerkkijono().

Esimerkki

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>

</body>
</html>

Jos jätät toisen parametrin pois, substring() leikkaa loput merkkijono.


JavaScript-merkkijono substr()

substr() on samanlainen kuin slice().

Ero on että toinen parametri määrittää pituuden poistetusta osasta.

Esimerkki

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>

</body>
</html>


Jos jätät toisen parametrin pois, substr() leikkaa pois loput merkkijono.

Esimerkki

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>

</body>
</html>


Jos ensimmäinen parametri on negatiivinen, sijainti lasketaan parametrin lopusta merkkijono.

Esimerkki

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>

</body>
</html>



Merkkijonon sisällön vaihtaminen

replace()-menetelmä korvaa määritetyn arvon toisella arvo merkkijonossa:

Esimerkki

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Kokeile itse →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>


Huomautus

Metodi replace() ei muuta sitä merkkijonoa, jota sitä kutsutaan.

Metodi replace() palauttaa uuden merkkijonon.

replace()-menetelmä korvaa vain ensimmäisen osuman

Jos haluat korvata kaikki osumat, käytä säännöllistä lauseketta, jossa on /g-lippu. Katso esimerkkejä alla.

Oletuksena replace()-menetelmä korvaa vain ensimmäisen osuman:

Esimerkki

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>


Oletusarvon mukaan replace()-menetelmä on kirjainkoolla. Kirjoitetaan MICROSOFT (ja isot kirjaimet) ei toimi:

Esimerkki

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("MICROSOFT","W3Schools");
}
</script>

<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>

</body>
</html>

Jos haluat korvata isot ja pienet kirjaimet, käytä säännöllistä lauseketta /i-lipulla (epäherkkä):

Esimerkki

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/MICROSOFT/i,"W3Schools");
}
</script>

</body>
</html>


Huomautus

Säännölliset lausekkeet kirjoitetaan ilman lainausmerkkejä.

Korvaa kaikki osumat käyttämällä säännöllistä lauseketta /g-lipulla (yleinen vastaavuus):

Esimerkki

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/Microsoft/g,"W3Schools");
}
</script>

</body>
</html>


Huomautus

Opit paljon enemmän säännöllisistä lausekkeista luvussa JavaScript Säännöllinen Ilmaisut.


JavaScript-merkkijono Korvaa kaikki()

Vuonna 2021 JavaScript esitteli merkkijonomenetelmän replaceAll():

Esimerkki

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Metodin replaceAll() avulla voit määrittää a säännöllinen lauseke korvattavan merkkijonon sijaan.

Jos parametri on säännöllinen lauseke, globaali lippu (g) on asetettava muussa tapauksessa tulee TypeError.

Esimerkki

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Huomautus

replaceAll() on ES2021-ominaisuus.

replaceAll() ei toimi Internet Explorerissa.


Muunnetaan isoiksi ja pieniksi kirjaimiksi

Merkkijono muunnetaan isoiksi kirjaimilla toUpperCase():

Merkkijono muunnetaan pieniksi komennolla toLowerCase():


JavaScript-merkkijono isoin kirjain()

Esimerkki

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toUpperCase();
}
</script>

</body>
</html>

JavaScript-merkkijono pieniin kirjaimiin()

Esimerkki

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 
converted to lower

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to lower case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toLowerCase();
}
</script>

</body>
</html>

JavaScript-merkkijono concat()

concat() yhdistää kaksi tai useampia merkkijonoja:

Esimerkki

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The concat() Method</h2>

<p>The concat() method joins two or more strings:</p>

<p id="demo"></p>

<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>


concat()-menetelmää voidaan käyttää plus-operaattorin sijaan. Nämä kaksi riviä tekevät saman:

Esimerkki

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

Huomautus

Kaikki merkkijonomenetelmät palauttavat uuden merkkijonon. Ne eivät muuta alkuperäistä merkkijonoa.

Muodollisesti sanoi:

Merkkijonot ovat muuttumattomia: Merkkijonoja ei voi muuttaa, ne vain korvataan.


JavaScript-merkkijono trimmaus()

Metodi trim() poistaa välilyönnit merkkijonon molemmilta puolilta:

Esimerkki

let text1 = "      Hello World!      ";
let text2 = text1.trim();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript-merkkijono trimStart()

ECMAScript 2019 lisäsi JavaScriptiin merkkijonomenetelmän trimStart(). <p>trimStart()-menetelmä toimii kuten trim(), mutta poistaa välilyönnit vain nauha.

Esimerkki

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript-merkkijonoa trimStart() on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript-merkkijono trimEnd()

ECMAScript 2019 lisäsi JavaScriptiin merkkijonomenetelmän trimEnd(). <p>trimEnd()-menetelmä toimii kuten trim(), mutta poistaa välilyönnit vain nauha.

Esimerkki

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript-merkkijonoa trimEnd() on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript-merkkijono täyte

ECMAScript 2017 lisäsi JavaScriptiin kaksi uutta merkkijonomenetelmää: padStart() ja padEnd(), jotka tukevat täyttöä merkkijonon alussa ja lopussa.


JavaScript-merkkijono padStart()

Metodi padStart() lisää merkkijonon alusta.

Se täyttää merkkijonon toisella merkkijonolla (useita kertoja), kunnes se saavuttaa tietyn pituuden.

Esimerkkejä

Täydennä merkkijonoa "0":lla, kunnes se saavuttaa pituuden 4:

let text = "5";
let padded = text.padStart(4,"0");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padStart(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Täydennä merkkijonoa "x":llä, kunnes se saavuttaa pituuden 4:

let text = "5";
let padded = text.padStart(4,"x");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>

</body>
</html>

Huomautus

Metodi padStart() on merkkijonomenetelmä.

Voit täyttää numeron muuntamalla sen ensin merkkijonoksi.

Katso alla oleva esimerkki.

Esimerkki

let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>

</body>
</html>

Selaimen tuki

padStart() on ECMAScript 2017 -ominaisuus.

Sitä tuetaan kaikissa nykyaikaisissa selaimissa:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart() ei ole tuettu Internet Explorerissa.


JavaScript-merkkijono padEnd()

Metodi padEnd() lisää merkkijonon lopusta.

Se täyttää merkkijonon toisella merkkijonolla (useita kertoja), kunnes se saavuttaa tietyn pituuden.

Esimerkkejä

let text = "5";
let padded = text.padEnd(4,"0");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padEnd(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
let text = "5";
let padded = text.padEnd(4,"x");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

Huomautus

Metodi padEnd() on merkkijonomenetelmä.

Jos haluat täyttää numeron, muunna numero ensin merkkijonoksi.

Katso alla oleva esimerkki.

Esimerkki

let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

Selaimen tuki

padEnd() on ECMAScript 2017 -ominaisuus.

Sitä tuetaan kaikissa nykyaikaisissa selaimissa:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd() ei ole tuettu Internet Explorerissa.


Merkkijonomerkkien purkaminen

Merkkijonomerkkien poimimiseen on kolme tapaa:

  • charAt(position)

  • charCodeAt(position)

  • Omaisuuden käyttöoikeus [ ]


JavaScript-merkkijono charAt()

Metodi charAt() palauttaa merkin määritettyyn kohtaan indeksi (sijainti) merkkijonossa:

Esimerkki

let text = "HELLO WORLD";
let char = text.charAt(0);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charAt() Method</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>

</body>
</html>


JavaScript-merkkijono charCodeAt()

Metodi charCodeAt() palauttaa merkin unicoden tietyssä merkkijonon indeksissä:

Menetelmä palauttaa UTF-16-koodin (kokonaisluvun välillä 0 - 65535).

Esimerkki

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charCodeAt() Method</h2>

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>

</body>
</html>


Omaisuuden käyttöoikeus

ECMAScript 5 (2009) sallii ominaisuuden pääsyn [ ] merkkijonoihin:

Esimerkki

let text = "HELLO WORLD";
let char = text[0];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property access on strings:</p>

<p>The first character in the string is:</p>
<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>

Huomautus

Omaisuuden käyttöoikeus saattaa olla hieman arvaamatonta:

  • Se saa merkkijonot näyttämään taulukoilta (mutta ne eivät ole)

  • Jos merkkiä ei löydy, [ ] palauttaa määrittelemättömän, kun taas charAt() palauttaa tyhjän merkkijonon.

  • Se on vain luettavissa. str[0]="A" ei anna virhettä (mutta ei toimi!)

Esimerkki

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property acces on strings are read only:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";

text[0] = "A";  // Does not work

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Merkkijonon muuntaminen taulukoksi

Jos haluat käyttää merkkijonoa taulukkona, voit muuntaa sen taulukoksi.

JavaScript-merkkijono split()

Merkkijono voidaan muuntaa taulukoksi split()-menetelmällä:

Esimerkki

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Display the first array element, after a string split:</p>

<p id="demo"></p>

<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>

</body>
</html>


Jos erotin jätetään pois, palautettava taulukko sisältää koko merkkijonon indeksissä [0].

Jos erotin on "", palautettava taulukko on yksittäisten matriisi hahmot:

Esimerkki

text.split("")

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<h2>The split().Method</h2>

<p id="demo"></p>

<script>
let text = "Hello";
const myArr = text.split("");

text = "";
for (let i = 0; i < myArr.length; i++) {
  text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>


Täydellinen merkkijonoviittaus

Täydellisen merkkijonoviitteen saat osoitteesta:

Täydellinen JavaScript-merkkijono.

Viite sisältää kuvauksia ja esimerkkejä kaikista merkkijonon ominaisuuksista ja menetelmistä.