JavaScript-merkkijonot


Sisällysluettelo

    Näytä sisällysluettelo

JavaScript-merkkijonot on tarkoitettu tekstin tallentamiseen ja käsittelyyn.

JavaScript-merkkijono on nolla tai useampi merkki, joka on kirjoitettu lainausmerkkien sisään.

Esimerkki

let text = "John Doe";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

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

<script>
let text = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Voit käyttää lainausmerkkejä tai lainausmerkkejä:

Esimerkki

let carName1 = "Volvo XC60";  
  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes 

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Strings are written inside quotes. You can use single or double quotes:</p>

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

<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>

</body>
</html>


Voit käyttää lainausmerkkejä merkkijonon sisällä, kunhan ne eivät vastaa lainausmerkkejä merkkijonon ympärillä:

Esimerkki

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>

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

<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>

</body>
</html>



String pituus

Voit selvittää merkkijonon pituuden käyttämällä sisäänrakennettua length-ominaisuutta:

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>



Pakohahmo

Koska merkkijonot on kirjoitettava lainausmerkkeihin, JavaScript ymmärtää tämän merkkijonon väärin:

let text = "We are the so-called "Vikings" from the north.";

Merkkijono katkaistaan muotoon "We are the ns".

Ratkaisu tämän ongelman välttämiseen on käyttää kenoviivaa estomerkkiä.

Kenoviiva (\) muuttaa erikoismerkit merkkijonomerkeiksi:

Code Result Description
\' ' Single quote
\" " Double quote
\\ \ Backslash

Jakso \" lisää lainausmerkin merkkijonoon:

Esimerkki

let text = "We are the so-called \"Vikings\" from the north.";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \" inserts a double quote in a string.</p>

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

<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Sarja \' lisää yhden lainauksen merkkijonoon:

Esimerkki

let text= 'It\'s alright.';

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \' inserts a single quote in a string.</p>

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

<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Jakso \\ lisää kenoviivan merkkijonoon:

Esimerkki

let text = "The character \\ is called backslash.";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

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

<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Kuusi muuta estosekvenssiä on voimassa JavaScriptissä:

\b

Askelpalautin

\f

Lomakesyöte

\n

Uusi rivi

\r

Vaunun palautus

\t

Vaakataulukko

\v

Pystysuora taulukko

Yllä olevat kuusi pakomerkkiä oli alun perin suunniteltu ohjaamaan kirjoituskoneet, telekopiokoneet ja faksit. Niissä ei ole mitään järkeä HTML:ssä.


Pitkien koodilinjojen rikkominen

Parhaan luettavuuden saavuttamiseksi ohjelmoijat haluavat usein välttää koodirivejä pidempiä kuin 80 merkkiä.

Jos JavaScript-lause ei mahdu yhdelle riville, paras paikka katkaista se on operaattorin jälkeen:

Esimerkki

document.getElementById("demo").innerHTML =
"Hello Dolly!";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

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

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

Voit myös hajottaa koodirivin tekstimerkkijonon sisällä yhdellä kenoviivalla:

Esimerkki

document.getElementById("demo").innerHTML = 
"Hello \
Dolly!";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

Metodi \ ei ole ensisijainen menetelmä. Sillä ei ehkä ole yleistä tukea.
Joillakin selaimilla on Älä salli välilyöntejä \-merkin takana.

Turvallisempi tapa katkaista merkkijono on käyttää merkkijonoa lisäys:

Esimerkki

document.getElementById("demo").innerHTML = "Hello " + 
"Dolly!";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

Et voi hajottaa koodiriviä kenoviivalla:

Esimerkki

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

JavaScript-merkkijonot objekteina

Normaalisti JavaScript-merkkijonot ovat primitiivisiä arvoja, jotka on luotu literaaleista:

let x = "John";

Mutta merkkijonot voidaan myös määritellä objekteiksi avainsanalla new:

let y = new String("John");

Esimerkki

let x = "John";
let y = new String("John");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

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

<script>
// x is a string
let x = "John";

// y is an object
let y = new String("John");

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

Älä luo Strings-objekteja.

Avainsana uusi monimutkaistaa koodia ja hidastaa sen suoritusnopeutta.

Merkkijonoobjektit voivat tuottaa odottamattomia tuloksia:

Kun käytät ==-operaattoria, x ja y ovat yht.:

let x = "John";
let y = new String("John");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

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

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Kun käytetään ===-operaattoria, x ja y eivät ole yhtä suuria:

let x = "John";
let y = new String("John");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

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

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Huomaa ero (x==y) ja (x===y) välillä.

(x == y) tosi vai epätosi?

let x = new String("John");
let y = new String("John");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

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

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) tosi vai epätosi?

let x = new String("John");
let y = new String("John");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

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

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Kahden JavaScript-objektin vertailu aina palauttaa false.

Täydellinen merkkijonoviittaus

Täydellisen merkkijonoviitteen saat osoitteesta:

Täydellinen JavaScript-merkkijono.

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