Web Devs

#React
#JavaScript
#VSCode

The Ultimate VSCode Setup for Front End/JS/React

https://goo.gl/wB7X5p

@fullStackDevs

706 views22:36

#EcmaScript6
#ES6

🌀 ویژگی های اضافه شده در EcmaScript 6

1️⃣ حل مشکلات Unicode و …:
در ES6 سعی شده که مشکلات مربوط به زبان های شرقی و خاورمیانه تا حد زیادی حل بشه مثلا وقتی length یک رشته رو میگیرد و یا کد اسکی رو میخواهید به دست بیارید یا Regex بنویسید یا تطبیق Regex انجام بدید بهتر عمل میکنند و این بهتر عمل کردن مختص به تمام متد ها است یعنی این بهبود به جای اینکه در متد ها تغییر کنه در Core اصلی Javascript تغییر کرده تا تمام قابلیت ها Built-in یا Third-party بتونن ازش استفاده کنند.

2️⃣ قالب های رشته Template String:
قبلا میخواستید چند تا متغیر رو لا به لای یه رشته بگنجونید چه کار انجام میدادید؟!
قطعا مثل زیر عمل میکردید:

 var finalStr = "Hello " + name + " and wellcome to: " + appName;

خب این همه استفاده از + و "" خیلی سخت است.
به جاش توی ES6 به این صورت عمل میکنیم:

 var finalStr = `Hello ${name} and wellcome to: ${appName}`;

پس استفاده از” از ‘استفاده کردیم و برای گنجوندن متغیر توی String از{VARIABLE_NAME}$ استفاده میکنیم.

اما یه مزیت دیگه این کار میتونید از قابلیت Multiline بودن اون استفاده کنید. فرض کنید میخواهید ساختار HTML را در قالب یک String در JS داشته باشید.

var finalHTML = '<div class="container">' + 
'<div class="row">' +
    '<div class="col-md-12">' +
       '<p class="text-center">www.Baboon.ir</p>' +
    '</div>' +
 '</div>' +
'</div>';

واقعا این کار آزار دهنده است اما توی ES6 میتونید به این صورت عمل کنید.

 var finalHTML = `<div class="container"> 
   <div class="row">
      <div class="col-md-12">
           <p class="text-center">www.Baboon.ir</p>
   </div>
  </div>
</div>`;

3️⃣ متد String.startsWith:
این متد چک میکند که آیا String با رشته یا کاراکتر مورد نظر شروع میشود یا خیر. اولین آرگومان این متد رشته مورد نظر است و دومین پارامتر یک عدد است که مشخص میکند شروع کجا باشد.

4️⃣ متد String.endsWith:
این متد چک میکند که آیا String با رشته یا کاراکتر مورد نظر خاتمه پیدا میکند یا خیر. اولین آرگومان این متد رشته مورد نظر است و دومین پارامتر یک عدد است که مشخص میکند شروع کجا باشد.

5️⃣ متد String.includes:
این متد چک میکند که یه string در رشته ای وجود دارد یا نه در اصل این متد به دنبال رشته مورد نظر در String میگردد و True یا False بر میگرداند.

6️⃣ متد String.repeat:
این متد String را با تعداد مورد نظر تکرار میکند و بر میگرداند برای مثال اگر "hamid" را با مقدار 3 به این متد بدهیم مقدار "hamidhamidhamid" را برمیگرداند.

7️⃣ متد String.codePointAt:
این متد کد ASCII کاراکتر Index که به آن ارجاع داده شده است را برمیگرد برای مثال اگر رشته "HAMID"را داشته باشیم و مقدار 1 را به این متد بدهیم خواهیم دید کد اسکی کارامتر A که 65 است بازگشت داده میشود. این متدحتی با Unicode و… کاراکتر هایی مثل 𠮷 مشکلی نداره.

8️⃣ متد String.fromCodePoint:
این متد دقیقا بر عکس متد قبل عمل میکند. این متد یک متد Static است یعنی با رشته ای صدا زده نمیشود و به صورت String.fromCodePoint صدا زده میشود.
این متد به مقدار دلخواه عدد میگیرد و کاراکتر موجود در آن کد اسکی را برمیگرداند. برای مثال اگر 65, 66, 67 را به این متد بدهیم مقدار ABC به ما بازگشت داده میشود.

9️⃣ تبدیل رشته به آرایه ها:
برای این کار کافیه به جای استفاده از splitبه صورت زیر عمل کنید.

 let arrayOfChars = [..."HAMIDFARAJI"];

🔟 حلقه بروی تک تک کاراکتر های رشته:
برای اینکه روی تک تک کاراکتر های یک رشته در JS معمولی باید کارهای زیادی میکردیم اما توی ES6 به راحتی با ایجاد یک for of این کار رو انجام میدید حتی این کار با Unicode و کارامتر های ME هم مشکلی نداره

2
3  for (let c of 'HAMID') {
 console.log(c);
}

@fullStackDevs

572 viewsedited 14:51