String Sınıfı

Giriş
String diğer Primitive tipler gibi immutable bir  sınıftır. Tek tırnak ile kullanılır.

big Alanı
Bu alan artık deprecate ediliyor. String döner.
Örnek
Elimizde number ve string içeren bir liste olsun. Number'ları öne string'leri arkaya sıralamak için şöyle yaparız.

a=>a.sort((a,b)=>!b.big-!a.big)

Açıklaması şöyle.

The deprecated but still widely supported method .big() is defined for Strings and undefined for Numbers. Hence the sorting criterion !b.big-!a.big which is either −1, 0 or 1.

join metodu
Şöyle yaparız. Çıktı olarakSSS_1111_abc_545454_xxxxxxxx_66661111111_XXXXX alırız.

const str = "SSS1111abc545454xxxxxxxx66661111111XXXXX";

const separator = '_'
const result = str.match(/[a-z]+|\d+/ig).join(separator);

length Alanı
Bir string'in bir başkası ile bittiğini anlamak için şöyle yaparız.

function confirmEnding(str, target) {
  const subtractLengths = str.length - target.length;
  const lastIndexOfString = str.lastIndexOf(target);
  return lastIndexOfString === subtractLengths;
}

raw metodu
raw veya verbatim string verir.
Örnek
Şöyle yaparız.

var str = String.raw`text\n abc`;

replace metodu
Örnek - /searcpattern/g
Elimizde şöyle bir kod olsun. Çıktı olarak "xx" alırız. Burada sadece x çıkmasını bekliyor olabiliriz.

console.log("asdf".replace(/.*/g, "x"));

Açıklaması şöyle. Önce her şeyi bulur ve x koyar. Daha sonra geriye boş string kalır. ".*" boş string ile eşleştiği için bir kere daha x ilave edilir ve neticede "xx" çıktısını alırız.

Because of the global (g) flag. The global flag allows for another search to start at the end of the previous match, thus finding an empty string

Açıklaması şöyle.

Remember that * matches zero or more elements.

Örnek
Regex kullanmak için şöyle yaparız.

str = 'okok{"msg":"uc_okok"}';
console.log(str.replace(/.*?({.*}).*/, "$1"));

Çıktı olarak şunu alırız.

{"msg":"uc_okok"}

toLowercase metodu
Şöyle yaparız.

document.write(('...').toLowerCase());

split metodu
Örnek

String'i tersine çevirmek için şöyle yaparız. split('') String nesnesini Character dizisine çevirir.

const reverse = function(inputNum) {
    const result = Math.sign(inputNum) * String(Math.abs(inputNum))
      .split('')
      .reverse()
      .join('');
    return result < -2147483648 || result > 2147483647 ? 0 : result;
};
console.log(reverse(-321));
console.log(reverse(1534236469));

Örnek

String'i tersine çevirmek için şöyle yaparız. split('') String nesnesini Character dizisine çevirir.

var to_reverse = ...;
var reversed = to_reverse.split('').reverse().join('');

fetch metodu - ES6

Giriş
Fetch'e gelmeden önce sırayla şunlar kullanılıyordu. Fetch ise tarayıcıda yerleşik bir kütüphane

XMLHttpRequest -> JQuery.ajax -> Axios veya Request (npm) -> Fetch

fetch API Nedir?

Açıklaması şöyle.

The Fetch API was introduced in relatively newer versions of JavaScript and has built-in support for Promises. Technically, it is just another method of hitting HTTP Requests while harnessing the powers and perks of Promises and Promise Chaining.

So in the fetch API, you pass the arguments in the following order:
- URL
- { } (This is purely optional, used to customize our Request)

The fetch API simply returns a Promise and hence we can implement handlers to process the response from the Promise. Based on whether the Promise resolves or rejects, we can handle that with JavaScript's  then() method. 

ES6 ile geliyor. Açıklaması şöyle

As of today, there are two primary ways to make a request in the browser. XMLHttpRequest and fetch. XMLHttpRequest existed in browsers for a long time. the fetch was introduced with ES6.

fetch ve window.fetch Aynı Şeydir

Açıklaması şöyle

On your developer console, try this experiment:

fetch === window.fetch

You'll see that this returns true. They are in fact the same thing.

window is the global object in a browser context. The browser APIs (distinct from language features) are found on the global window object.

Örnek - GET
Açıklaması şöyle.

fetch accepts AbortSignal as part of the second argument.

Şöyle yaparız. Burada fetch(...).then(...).catch(...) şeklinde kullanılıyor

const controller = new AbortController();
const signal = controller.signal;


// API responds after 5s
// Note the 'signal' in the second argument
fetch('https://slowmo.glitch.me/5000', { signal })
  .then(r => r.json())
  .then(response => console.log(response))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch was aborted');
    } else {
      console.error('Oops!', err);
    }
  });

// Abort the request after 2s
// This will abort the fetch with 'AbortError'
setTimeout(() => {
  controller.abort();
}, 2000);

Örnek - POST JSON
Post için şöyle yaparız. Post için timeout vermenin yolu yok.

fetch('<url_here>', {
  body: JSON.stringify(data),
  headers: {
    'content-type': 'application/json' 
  },
  method: 'POST'
})
  .then(response => response.json())
  .then(res => {
    //work with response data
});

Örnek - POST JSON
Şöyle yaparız

const response = await fetch('/api/getMarkers', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: JSON.stringify(num) // body data type must match "Content-Type" header
  });
mark = await response.json();
this.setState({ markers: mark })