6. Dizgiler

JavaScript'teki karakter dizileri, PHP'tekine çok benzerdir.

6.1. [str-01] betiği

Anlaşılması gereken ilk şey, bir dize oluşturulduktan sonra artık değiştirilemez olduğudur. İlk dizeden yeni bir dize oluşturmak için birçok yöntem mevcuttur, ancak ilk dize her zaman değişmeden kalır. Ayrıca, bir karakter dizesi iki türde olabilir:

• [string] (sabit bir dize ile başlatıldığında);
• [object], [String] sınıfının bir örneği olarak oluşturulduğunda;

''use strict';

// dizgiler salt okunurdur (değiştirilemez)

// bir karakter dizisi
const chaîne1 = "abcd ";
// tür
console.log("typeof(chaîne1)=", typeof (chaîne1));
// 2. karakter
console.log("chaîne1[2]=", chaîne1[2]);
// bir hataya neden oluyor
chaîne1[2] = "0";

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Temp\19-09-01\javascript\strings\str-01.js"
typeof(chaîne1)= string
chaîne1[2]= c
c:\Temp\19-09-01\javascript\strings\str-01.js:1
TypeError: Cannot assign to read only property '2' of string 'abcd '
at Object.<anonymous> (c:\Temp\19-09-01\javascript\strings\str-01.js:12:12)
at Generator.next (<anonymous>)

6.2. [str-02] komut dosyası

Bu komut dosyası, bir karakter dizisinin iki farklı şekilde oluşturulabileceğini göstermektedir.

''use strict';

// dizgiler iki türde olabilir

// bir sabit dize
const chaîne1 = "abcd ";
// tür
console.log("typeof(chaîne1)=", typeof (chaîne1));
// String örneği
const chaîne2 = new String("xyzt");
// tür
console.log("typeof(chaîne2)=", typeof (chaîne2));
// başka bir yazım biçimi (new olmadan) – [string] türü, [object] değil
const chaîne3 = String("12 34");
// tür
console.log("typeof(chaîne3)=", typeof (chaîne3));
// [string] türü ile [object] türü, String sınıfının yöntemlerinin aynısını sunar
console.log("chaîne1.length=", chaîne1.length);
console.log("chaîne2.length=", chaîne2.length);

Açıklamalar

• 6. satır: Bir karakter dizisini tanımlamanın genel yöntemi. [chaîne1], [string] türünde olacaktır;
• 10. satır: [String] sınıfının oluşturucusu kullanılarak bir karakter dizisi oluşturulabilir. [chaîne2], [object] türünde olacaktır;

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\strings\str-02.js"
typeof(chaîne1)= string
typeof(chaîne2)= object
typeof(chaîne3)= string
chaîne1.length= 5
chaîne2.length= 4

[string] türü, [String] sınıfının yöntemlerinden yararlanır.

6.3. [str-03] komut dosyası

Bu komut dosyası, değişkenlerin yer değiştirmesiyle oluşturulan belirli bir dizeyi gösterir.

'use strict';

// dize
const chaîne = "Introduction à Javascript par l'exemple";
// değişken interpolasyonu içeren dize
const str = `[${chaîne}].substr(3, 2)=` + chaîne.substr(3, 2)
console.log(str);

Açıklamalar

• 6. satır: ${değişken} ifadesini içeren ve bu ifadenin değişkenin değeriyle değiştirildiği dizelere rastlanabilir. Burada, PHP dizelerindeki $ değişkenleriyle aynı mantık geçerlidir. Bu tür bir dizgenin yazım biçimine dikkat edilmelidir: dizge, “backstick” veya ters apostrof (Fransızca klavyede AltGr-7) ile çevrelenir;

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Temp\19-09-01\javascript\strings\tempCodeRunnerFile.js"
[Introduction à Javascript par l'exemple].substr(3, 2)=ro

6.4. [str-04] betiği

Değişken interpolasyonu içeren dize yetersiz kalmaktadır. Nitekim, ${değişken} ifadesinde değişkenin yerine bir ifade koymak mümkün değildir. C dilinde programlama yapmış olanlar için, biçimlendirilmiş dizeler yazmak veya oluşturmak için [printf, sprintf] gibi işlevlerin bir benzeri yoktur. Yüzlerce geliştirici, devasa bir ekosistem oluşturan binlerce JavaScript paketi geliştirmiştir. JavaScript’in kendi içinde karşılanamayan bir ihtiyaç olduğunda, bu ihtiyacı karşılayacak bir paket aramanın zamanı gelmiştir. Bunun için [npm] paket yöneticisini kullanıyoruz. Bu yönetici, paket açıklamalarında bir karakter dizisini aramaya olanak tanıyan [search] seçeneğine sahiptir. [npm], aramaya uyan paketlerin listesini döndürür. Dolayısıyla, paket açıklamalarında [sprintf] dizisini arayacağız:

• [4] sütununda, [3] sütunundaki paketlerin anahtar kelimeleri;
• [5] sütununda, [3] sütunundaki paketlerin açıklamaları;

Bir sonraki adım, [npm] ve [https://www.npmjs.com/] araçlarının web sitesine gidip paketlerin açıklamalarını okumaktır:

[3]'te paket listesini inceleyip bir tanesini seçin.

Paketin açıklamasında, onu yüklemek ve kullanmak için gerekli bilgiler bulunur:

[sprintf-js] paketini, [VSCode] terminalinde kuruyoruz:

Bu kurulum, [javascript] [2] klasörünün kök dizininde bulunan [package.json] dosyasını değiştirecektir:

Yukarıda görüldüğü gibi, paket [dependencies] içine, yani projenin çalıştırılması için gerekli paketlerin içine kurulmuştur. Hatırlatmak gerekirse, [devDependencies] klasörüne yalnızca projenin geliştirme aşamasında gerekli olan paketler eklenir. Bunlar, projenin çalıştırılması sırasında kullanılmaz. Bu fark, projenin üretim ortamına alınacak nihai sürümünün oluşturulması gerektiğinde önemlidir. Aşağıdakileri yapmak için çeşitli araçlar mevcuttur:

• çalıştırma için gerekli tüm jS dosyalarını tek bir dosyada birleştirmek. Dolayısıyla, [devDependencies] paketleri bu son dosyaya dahil edilmez;
• bu dosyayı küçültmek, yani boyutunu mümkün olduğunca azaltmak. Bunun için örneğin tüm yorumlar kaldırılır;
• kodu “gizlemek”, yani anlaşılmasını zorlaştırmak. Örneğin, taux, salaire, impôt değişkenleri a, b, c değişkenleriyle değiştirilecektir;
• diğer optimizasyonlar yapmak;

jS projesinin nihai dosyasının bu optimizasyonu, web programlamada kullanılır. Bir web uygulaması çok sayıda JavaScript dosyasına bağlı olabilir. Bunların tarayıcı tarafından yüklenmesi, uygulamanın ilk sayfasının görüntülenmesini yavaşlatabilir. Yukarıdaki optimizasyon, bu yükleme süresini iyileştirmeyi amaçlamaktadır. Yükleme süresi kullanıcılar tarafından çok uzun bulunursa, uygulama kullanılmayacaktır.

Artık [sprintf-js] paketine sahip olduğumuza göre, bunu kullanmamız gerekiyor. İşte [str-04] komut dosyası:

'use strict';
// sprintf işlevini kullanmak için harici bir paket kullanımı
import { sprintf } from 'sprintf-js';
// dize
const chaîne = "Introduction à Javascript par l'exemple";
// yöntem
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

ECMAScript 6 ile, bir paket tarafından dışa aktarılan bir nesneyi içe aktarmak için [import] anahtar sözcüğünü kullanırız. Paketin neyi dışa aktardığını öğrenmek için koduna bakabiliriz:

• [1]'te, içe aktarılan pakete sağ tıklayın;
• [2]'te, tanımını görmek istersek;
• [3-4]'te, paketin [sprintf] adlı bir işlevi dışa aktardığını görürüz;

[sprintf-js] paketindeki [sprintf] fonksiyonu şu komutla içe aktarılır:

import { sprintf } from 'sprintf-js';

Tam kod:

'use strict';
// sprintf işlevini kullanmak için harici bir paket kullanımı
import { sprintf } from 'sprintf-js';
// dize
const chaîne = "Introduction à Javascript par l'exemple";
// yöntem
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

şu sonuçları verir:

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\strings\str-04.js"
c:\Temp\19-09-01\javascript\strings\str-04.js:3
import { sprintf } from 'sprintf-js';
^

SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)

1. satırda, [import] komutu anlaşılmıyor. Bunun nedeni, bu derste (Eylül 2019) kullanılan [node.js]'in 10.15.1 sürümünün, modül olarak adlandırılan paketlerin içe aktarılması için ECMAScript standardına henüz uymamasıdır. 2019 yılında, [node.js], CommonJS adlı bir modül standardına uymaktadır. ECMAScript modüllerinin [node.js] tarafından entegrasyonu 2020 yılında planlanmaktadır. Yine bu durumda, geliştiriciler bu konuya el attılar ve ES6 modüllerinin [node.js] ile birlikte şimdiden (2019) kullanılmasını sağlayan paketler ürettiler.

[esm] (ECMAScript Modülleri) adlı bir paketi kullanacağız. Bunu, [javascript] projesinin bir terminaline kuruyoruz:

[4]'te, [esm] ve [1-3] paketlerinin kurulmasının [javascript/package.json] dosyasını değiştirdiğini görüyoruz.

Henüz bitmedi. [esm] modülünün [node.js] tarafından kullanılabilmesi için, [node.js]'i [-r esm] argümanıyla çalıştırmak gerekir.

Bu nedenle, [VSCode]'in [Code Runner] uzantısının yapılandırmasını değiştiriyoruz:

[11]'e [-r esm] argümanını ekleyip yapılandırmayı kaydediyoruz (Ctrl-S).

Artık [str-04] komut dosyasını çalıştırabiliriz:

'use strict';
// sprintf işlevini kullanmak için harici bir paket kullanımı
import { sprintf } from 'sprintf-js';
// dize
const chaîne = "Introduction à Javascript par l'exemple";
// substr yöntemi
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

6.5. [str-05] komut dosyası

[sprintf] işleviyle ilgili belgelerde şunlar yazmaktadır:

Biçim dizgesindeki yer tutucular % işaretiyle belirtilir ve ardından şu öğelerden bir veya daha fazlası bu sırayla gelir:

• Değer için hangi argüman indeksinin kullanılacağını seçen, $ işaretiyle başlayan isteğe bağlı bir sayı. Belirtilmezse, argümanlar giriş dizgesindeki yer tutucularla aynı sırayla yerleştirilir.
• Sayısal değerlerde sonucun başına artı veya eksi işareti eklenmesini zorlayan isteğe bağlı bir + işareti. Varsayılan olarak, negatif sayılarda yalnızca - işareti kullanılır.
• Dolgu için hangi karakterin kullanılacağını belirten isteğe bağlı bir dolgu belirleyicisi (belirtilirse). Olası değerler 0 veya ' (tek tırnak) ile başlayan herhangi bir karakterdir. Varsayılan ayar, boşluklarla dolgudur.
• Sprintf'in bu yer tutucunun sonucunu sola hizalamasını sağlayan isteğe bağlı bir - işareti. Varsayılan ayar, sonucun sağa hizalanmasıdır.
• Sonucun kaç karakterden oluşması gerektiğini belirten isteğe bağlı bir sayıdır. Döndürülecek değer bu sayıdan daha kısa ise, sonuç doldurulur. j (JSON) tür belirleyicisiyle birlikte kullanıldığında, doldurma uzunluğu girinti için kullanılan sekme boyutunu belirtir.
• Kayan noktalı sayılar için kaç basamak gösterileceğini belirten, bir . (nokta) ve ardından bir sayıdan oluşan isteğe bağlı bir hassasiyet değiştiricisidir. g tür belirleyicisiyle birlikte kullanıldığında, anlamlı basamak sayısını belirtir. Bir dizgide kullanıldığında, sonucun kesilmesine neden olur.
• Aşağıdakilerden herhangi biri olabilen bir tür belirleyicisi:
  • % — % karakterini verir
  • b — bir tamsayıyı ikili sayı olarak verir
  • c — ASCII değerine sahip karakter olarak bir tamsayı verir
  • d veya i — bir tamsayıyı işaretli ondalık sayı olarak verir
  • e — bilimsel gösterim kullanılarak bir kayan nokta sayı üretir
  • u — bir tamsayıyı işaretsiz ondalık sayı olarak döndürür
  • f — olduğu gibi bir float değeri verir; yukarıdaki hassasiyetle ilgili notlara bakınız
  • g — olduğu gibi bir float değeri verir; yukarıdaki hassasiyetle ilgili notlara bakınız
  • o — bir tamsayıyı sekizlik sayı olarak döndürür
  • s — bir dizeyi olduğu gibi döndürür
  • t — true veya false değerini döndürür
  • T — argument1'in türünü döndürür
  • v — belirtilen argümanın temel değerini döndürür
  • x — bir tamsayıyı onaltılık sayı olarak döndürür (küçük harf)
  • X — bir tamsayıyı onaltılık sayı olarak döndürür (büyük harf)
  • j — bir JavaScript nesnesini veya dizisini JSON kodlu bir dize olarak döndürür

[script-05] betiği bu biçimlerden bazılarını kullanır:

'use strict';
// sprintf işlevini kullanmak için harici bir paket kullanımı
import { sprintf } from 'sprintf-js';
// dize
const chaîne = "Javascript";
// karakter dizileri
console.log(sprintf("[%s, %%s]=>[%s]", chaîne, chaîne));
console.log(sprintf("[%s, %%20s]=>[%20s]", chaîne, chaîne));
console.log(sprintf("[%s, %%-20s]=>[%-20s]", chaîne, chaîne));
// tamsayılar
console.log(sprintf("[%d, %%d]=>[%d]", 10, 10));
console.log(sprintf("[%d, %%4d]=>[%4d]", 10, 10));
console.log(sprintf("[%d, %%-4d]=>[%-4d]", 10, 10));
console.log(sprintf("[%d, %%04d]=>[%04d]", 10, 10));
// reel sayılar
console.log(sprintf("[%f, %%f]=>[%f]", -10.5, -10.5));
console.log(sprintf("[%f, %%10.2f]=>[%10.2f]", -10.5, -10.5));
console.log(sprintf("[%f, %%-10.2f]=>[%-10.2f]", -10.5, -10.5));
console.log(sprintf("[%f, %%010.3f]=>[%010.3f]", -10.5, -10.5));
// json
console.log(sprintf("personne (%%j)=%j", { nom: "mathieu", âge: 34 }));
// tür
console.log(sprintf("type personne (%%T)=%T", { nom: "mathieu", âge: 34 }));
// boole
console.log(sprintf("booléen (%%t)=%t", 4 === 4));

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\strings\str-05.js"
[Javascript, %s]=>[Javascript]
[Javascript, %20s]=>[ Javascript]
[Javascript, %-20s]=>[Javascript ]
[10, %d]=>[10]
[10, %4d]=>[ 10]
[10, %-4d]=>[10 ]
[10, %04d]=>[0010]
[-10.5, %f]=>[-10.5]
[-10.5, %10.2f]=>[ -10.50]
[-10.5, %-10.2f]=>[-10.50 ]
[-10.5, %010.3f]=>[-00010.500]
personne (%j)={"nom":"mathieu","âge":34}
type personne (%T)=object
booléen (%t)=true

6.6. [str-06] betiği

[str-06] betiği, [String] sınıfının bazı yöntemlerini sunar; bu yöntemler [string] türünde de kullanılabilir:

''use strict';
// sprintf işlevini kullanmak için harici bir paket kullanımı
import { sprintf } from 'sprintf-js';
// dize
const chaîne = "  Introduction à Javascript ";
// bazı yöntemler
// substr(10,2): 10. karakterden itibaren 2 karakter
console.log(sprintf("[%s].substr(10,2)=[%s]", chaîne, chaîne.substr(10, 2)));
// trim: dizenin başındaki ve sonundaki boşlukların kaldırılması (boşluk=\b \t \r \n \f)
console.log(sprintf("[%s].trim()=[%s]", chaîne, chaîne.trim()));
// toLowerCase: küçük harfe dönüştürme
console.log(sprintf("[%s].toLowerCase=[%s]", chaîne, chaîne.toLowerCase()));
// toUpperCase: büyük harfe dönüştürme
console.log(sprintf("[%s].toUpperCase=[%s]", chaîne, chaîne.toUpperCase()));
// indexOf: aranan dizenin dize içi ndeki konumu; alt dize yoksa -1
console.log(sprintf("[%s].indexOf('Java')=[%s]", chaîne, chaîne.indexOf('Java')));
console.log(sprintf("[%s].trim().indexOf('abcd')=[%s]", chaîne, chaîne.indexOf('abcd')));
// includes: aranan dize dizede varsa true
console.log(sprintf("[%s].includes('Java')=[%s]", chaîne, chaîne.includes('Java')));
// length: dizgenin uzunluğu - bu bir yöntem değil, bir özelliktir
console.log(sprintf("[%s].length=[%s]", chaîne, chaîne.length));
// slice (7,10): 7 ile 9 numaralı karakterlerden oluşan dize
console.log(sprintf("[%s].slice(7,10)=[%s]", chaîne, chaîne.slice(7, 10)));
// match: dizgide bir ifade arar - bu ifade bir düzenli ifade olabilir
// /intro/i: [intro] dizesini büyük veya küçük harflerle belirten düzenli ifade
// bulunan dizgiyi döndürür
console.log(sprintf("[%s].match(/intro/i)=[%s]", chaîne, chaîne.match(/intro/i)));
// replace: dizgide "dizgi1" ifadesini "dizgi2" ile değiştirir
// i harfinin ilk geçtiği yeri x ile değiştirir
console.log(sprintf("[%s].replace('i','x')=[%s]", chaîne, chaîne.replace('i', 'x')));
// i harfinin tüm geçitlerini x ile değiştirir
// /i/g, i karakterinin tüm (g) geçitlerini belirten bir düzenli ifadedir
console.log(sprintf("[%s].replace(/i/g,'x')=[%s]", chaîne, chaîne.replace(/i/g, 'x')));
// split: dizgiyi split parametresiyle ayrılmış kelimelere böler
// bu kelimelerin dizisini döndürür
// /\s*/ : 0 veya daha fazla boşlukla ayrılmış kelimeler
console.log(sprintf("[%s].split(/\\s*/)=[%s]", chaîne, chaîne.split(/\s*/)));
// /\s+/ : bir veya daha fazla boşlukla ayrılmış kelimeler
console.log(sprintf("[%s].split(/\\s+/)=[%s]", chaîne, chaîne.split(/\s+/)));

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\strings\str-06.js"
[ Introduction à Javascript ].substr(10,2)=[ti]
[ Introduction à Javascript ].trim()=[Introduction à Javascript]
[ Introduction à Javascript ].toLowerCase=[ introduction à javascript ]
[ Introduction à Javascript ].toUpperCase=[ INTRODUCTION À JAVASCRIPT ]
[ Introduction à Javascript ].indexOf('Java')=[17]
[ Introduction à Javascript ].trim().indexOf('abcd')=[-1]
[ Introduction à Javascript ].includes('Java')=[true]
[ Introduction à Javascript ].length=[28]
[ Introduction à Javascript ].slice(7,10)=[duc]
[ Introduction à Javascript ].match(/intro/i)=[Intro]
[ Introduction à Javascript ].replace('i','x')=[ Introductxon à Javascript ]
[ Introduction à Javascript ].replace(/i/g,'x')=[ Introductxon à Javascrxpt ]
[ Introduction à Javascript ].split(/\s*/)=[,I,n,t,r,o,d,u,c,t,i,o,n,à,J,a,v,a,s,c,r,i,p,t,]
[ Introduction à Javascript ].split(/\s+/)=[,Introduction,à,Javascript,]