JavaScript-merkkijonot on tarkoitettu tekstin tallentamiseen ja käsittelyyn.
JavaScript-merkkijono on nolla tai useampi merkki, joka on kirjoitettu lainausmerkkien sisään.
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ä:
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ä:
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>
Voit selvittää merkkijonon pituuden käyttämällä sisäänrakennettua length
-ominaisuutta:
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>
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:
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:
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:
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ä:
Askelpalautin
Lomakesyöte
Uusi rivi
Vaunun palautus
Vaakataulukko
Pystysuora taulukko
Yllä olevat kuusi pakomerkkiä oli alun perin suunniteltu ohjaamaan kirjoituskoneet, telekopiokoneet ja faksit. Niissä ei ole mitään järkeä HTML:ssä.
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:
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:
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:
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:
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>
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");
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äydellisen merkkijonoviitteen saat osoitteesta:
Täydellinen JavaScript-merkkijono.
Viite sisältää kuvauksia ja esimerkkejä kaikista merkkijonon ominaisuuksista ja menetelmistä.