برگهتقلب ریاکت
React Cheat Sheet
برای آموزش کامل React هم میتوانید به سایت زیر مراجعه فرمایید.
https://reactjs.org/docs/hello-world.html
Online VS Code IDE for Angular & React.
رشتهها در ES 6
در بیشتر زبانهای برنامهنویسی قابلیتی تحت عنوان String Interpolation وجود دارد. منظور، فرآیند جایگزین کردن مقادیر، با یکسری placeholder درون یک رشته است. در نسخههای قبلی جاوا اسکریپت محدودیتهایی در استفاده از رشتهها وجود داشت و امکان انجام این کار به صورت توکار مهیا نبود. یعنی برای پیادهسازی این قابلیت میتوانستیم با تغییر prototype شیء String و یا روشهای دیگری اینحالت را پیادهسازی کنیم (+):
// First, checks if it isn't implemented yet. if (!String.prototype.format) { String.prototype.format = function() { var args = arguments; return this.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] != 'undefined' ? args[number] : match ; }); }; } "Hello, {0}, I'm a simple {1}, Today is: {2}".format("World", "String", new Date()); // Output "Hello, World, I'm a simple String, Today is: Tue Dec 29 2015 10:21:10 GMT+0330 (Iran Standard Time)"
اما در ES 6 با کمک قابلیتی تحت عنوان template string این محدودیتها به طور قابل ملاحظهایی کاهش پیدا کرده است. در واقع یک template string، یک رشتهی جاوا اسکریپتی است که به جای (" ") و یا (' ') درون دو کاراکتر (` `) یا به اصطلاح back-tick character محصور خواهد شد. این ویژگی در سناریوهای مختلفی کاریرد دارد. از این ویژگی میتوانیم جهت الحاق رشتهها استفاده کنیم. به عنوان مثال میتوانیم کد زیر را:
let category = "music"; let id = 2112; let url = "http://apiserver/" + category + "/" + id;
با کمک template string به اینصورت بازنویسی کنیم:
let category = "music"; let id = 2112; let url = `http://apiserver/${category}/${id}`;
و یا میتوانیم مثال ابتدای مطلب را به اینصورت بازنویسی کنیم:
console.log(`Hello, ${"World"}, I'm a simple ${"String"}, Today is: ${new Date()}`);
همانطور که عنوان شد برای استفاده از این قابلیت باید رشتهی موردنظر را درون دو کاراکتر (` `) قرار دهیم. سپس درون این کاراکترها میتوانیم literal text و همچنین یکسری placeholder جهت جایگزین کردن با مقادیر و عبارات موردنظر داشته باشیم. این placeholderها نیز با استفاده از سینتکس { }$ قابل تعریف هستند. لازم به ذکر است که عبارت موردنظرمان را باید درون دو علامت { } بنویسیم. مقادیر درون این دو علامت میتوانند هر عبارت معتبر جاوا اسکریپتی باشند:
let a = 5; let b = 10; console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`); // "Fifteen is 15 and // not 20."
در کد فوق متغیرهای a و b درون placeholderهای مربوطه جایگزین خواهند شد. همانطور که مشاهده میکنید، این سینتکس نسبت به سینتکس + که برای الحاق رشتهها قبلاً مورد استفاده قرار میگرفت خیلی بهتر و خواناتر است.
به صورت خلاصه:
- کد درون placeholder میتواند هر عبارت جاوا اسکریپتی باشد.
- اگر مقدار درون placeholder یک رشته نباشد٬ توسط متد toString به رشته تبدیل خواهد شد.
- اگر بخواهید درون template string از یک کاراکتر backtick استفاده کنید٬ میتوانید به این صورت عمل کنید:
`\`` // یا "`"
Multiline Strings
console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"
همانطور که مشاهده میکنید، template string از متنهای چندخطی نیز به خوبی پشتیبانی میکند. به عنوان مثال اگر رشتهی فوق را درون گیومه مینوشتیم میبایستی از سینتکس + برای الحاق دو خط فوق استفاده میکردیم:
console.log("string text line 1\n"+ "string text line 2"); // "string text line 1 // string text line 2"
محدودیتهای template strings
- به صورت خودکار کارکترهای خاص را برای شما escape نمیکند (جهت جلوگیری از آسیبپذیریهای XSS).
- به صورت کامل از کتابخانههایی جهت اعمال internationalization پشتیبانی نمیکند.
- جایگزینی برای کتابخانههایی مانند Mustache و Nunjucks نیست.
var x = 1; var y = 3; var result = upper `${x} + ${y} is ${x+y}`; console.log(result); // Output // 1 + 3 IS 4
let upper = function(strings, ...values){ let result = ""; for(var i = 0; i < strings.length; i++){ result += strings[i]; if(i < values.length){ result += values[i]; } } return result.toUpperCase(); };
strings = ["", " + ", " is ", ""]; values = [1, 3, 4];
یک مثال عملی
میخواهیم یک tag template ایجاد کنیم که به انتهای اعداد درون یک تملپت، مقدار "تومان" را اضافه کرده و خود عدد را نیز به صورت سه رقم سه رقم جدا کند. میخواهیم رشتهی زیر همراه با مقادیر آن:
var name = "سیروان عفیفی"; var price = 150000; var text = withToman `${name} با تشکر از خرید شما, مبلغ قابل پرداخت: ${price}`; alert(text);
function withToman(strings, ...values) { return strings.reduce( function (s, v, idx) { if(idx > 0) { if(typeof values[idx - 1] == "number") { s += `${values[idx - 1].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} تومان` } else { s += values[idx -1]; } } return s + v; }, ""); }
آیا Null یک نوع دادهایی است؟
In the last post, I looked at auto-property enhancements, with several comments pointing out some nicer usages. I recently went through the HtmlTags codebase, C# 6-ifying “all the things”, and auto property and expression bodied function members were used pretty much everywhere. This is a large result of the codebase being quite tightly defined, with small objects and methods doing one thing well.