JavaScript Dizeleri

İçindekiler

JavaScript dizeleri metni depolamak ve değiştirmek içindir.

Bir JavaScript dizesi, tırnak içine yazılan sıfır veya daha fazla karakterden oluşur.

Örnek

let text = "John Doe";

Kendiniz Deneyin →

<!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>

Tek veya çift tırnak kullanabilirsiniz:

Örnek

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

Kendiniz Deneyin →

<!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>

Tırnaklarla eşleşmedikleri sürece bir dize içinde tırnak işaretleri kullanabilirsiniz dizeyi çevreleyen:

Örnek

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

Kendiniz Deneyin →

<!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>

IP uzunluğu

Bir dizenin uzunluğunu bulmak için yerleşik length özelliğini kullanın:

Örnek

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

Kendiniz Deneyin →

<!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>

Kaçış Karakteri

Dizelerin tırnak içinde yazılması gerektiğinden, JavaScript bu dizeyi yanlış anlayacaktır:

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

Dize "Biz sözdeyiz" diye kesilecek.

Bu sorunu önlemenin çözümü ters eğik çizgi kaçış karakterini kullanmaktır.

Ters eğik çizgi (\) kaçış karakteri, özel karakterleri dize karakterlerine dönüştürür:

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

\" dizisi bir dizeye çift tırnak ekler:

Örnek

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

Kendiniz Deneyin →

<!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>

\' dizisi, bir dizeye tek bir tırnak işareti ekler:

Örnek

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

Kendiniz Deneyin →

<!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>

\\ dizisi bir dizeye ters eğik çizgi ekler:

Örnek

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

Kendiniz Deneyin →

<!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>

JavaScript'te altı kaçış dizisi daha geçerlidir:

\b: Geri tuşu
\f: Form besleme
\n: Yeni hat
\r: Satırbaşı
\t: Yatay Tablolayıcı
\v: Dikey Tablolayıcı

Yukarıdaki 6 kaçış karakteri başlangıçta kontrol etmek için tasarlandı daktilolar, teletipler ve faks makineleri. HTML'de hiçbir anlam ifade etmiyorlar.

Uzun Kod Satırlarını Kırmak

En iyi okunabilirlik için programcılar genellikle daha uzun kod satırlarından kaçınmak isterler. 80 karakter.

Bir JavaScript ifadesi tek bir satıra sığmıyorsa bölünecek en iyi yer bir operatörden sonra:

Örnek

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

Kendiniz Deneyin →

<!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>

Ayrıca bir metin dizesi içindeki kod satırını tek bir ters eğik çizgiyle bölebilirsiniz:

Örnek

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

Kendiniz Deneyin →

<!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>

\ yöntemi tercih edilen yöntem değildir. Evrensel desteğe sahip olmayabilir.
Bazı tarayıcılar destekler \ karakterinin arkasında boşluk bırakmayın.

Bir dizeyi bölmenin daha güvenli bir yolu dize kullanmaktır ek:

Örnek

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

Kendiniz Deneyin →

<!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>

Bir kod satırını ters eğik çizgiyle bölemezsiniz:

Örnek

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

Kendiniz Deneyin →

<!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>

Nesne Olarak JavaScript Dizeleri

Normalde, JavaScript dizeleri değişmez değerlerden oluşturulan ilkel değerlerdir:

let x = "John";

Ancak dizeler aynı zamanda new anahtar kelimesine sahip nesneler olarak da tanımlanabilir:

let y = new String("John");

Örnek

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

Kendiniz Deneyin →

<!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>

Strings nesneleri oluşturmayın.

new anahtar sözcüğü kodu karmaşıklaştırır ve yürütme hızını yavaşlatır.

String nesneleri beklenmeyen sonuçlar üretebilir:

== operatörünü kullanırken x ve y eşittir:

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

Kendiniz Deneyin →

<!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>

=== operatörünü kullanırken x ve y eşit değildir:

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

Kendiniz Deneyin →

<!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>

(x==y) ve (x===y) arasındaki farka dikkat edin.

(x == y) doğru mu yanlış mı?

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

Kendiniz Deneyin →

<!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) doğru mu yanlış mı?

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

Kendiniz Deneyin →

<!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>

İki JavaScript nesnesini karşılaştırmak her zaman false değerini döndürür.

Tam Dize Referansı

Tam bir String referansı için şuraya gidin:

JavaScript Dizesi Referansını Tamamlayın.

Referans, tüm dize özelliklerinin ve yöntemlerinin açıklamalarını ve örneklerini içerir.