ترجمه‌ی ES5 در JavaScript

ECMAScript 5 چیست؟

ECMAScript 5 نیز به عنوان ES5 و ECMAScript 2009 شناخته می‌شود.

این فصل برخی از مهم‌ترین ویژگی‌های ES5 را معرفی می‌کند.

ویژگی‌های ECMAScript 5

این‌ها جدیدترین ویژگی‌هایی هستند که در سال 2009 منتشر شده‌اند:

  • "use strict" دستورالعمل
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • var timInMSs = Date.now();
  • برای اطلاعات بیشتر بخوانید.
  • ویژگی‌ها و روش‌های جدید شیء

تغییرات زبان ECMAScript 5

  • دسترسی به ویژگی‌های رشته با [ ]
  • کلمات رشته‌ای آرایه و شیء با کاما اضافی
  • کلمات رشته‌ای چند خطی
  • کلمات رزرو شده به عنوان نام属性

"use strict" دستورالعمل

"use strict" تعریف می‌کند که کد جاوااسکریپت باید به عنوان "مود سختگیرانه" اجرا شود.

مثلاً، با استفاده از مود سختگیرانه، نمی‌توان از متغیرهای غیر تعریف شده استفاده کرد.

شما می‌توانید مود سختگیرانه را در همه برنامه‌ها استفاده کنید. این می‌تواند به شما کمک کند تا کدهای واضح‌تری بنویسید، به عنوان مثال، از استفاده از متغیرهای غیر تعریف شده جلوگیری می‌کند.

"use strict” تنها یک عبارت رشته‌ای است. در مرورگرهای قدیمی که این‌ها را درک نمی‌کنند، خطا نمی‌اندازند.

لطفاً بخوانید م��د سختگیرانه JS برای اطلاعات بیشتر بخوانید.

String.trim()

String.trim() حذف حروف خالی در ابتدا و انتهای یک رشته.

مثال

var str = "       Hello World!        ";
alert(str.trim());

آزمایش کنید

لطفاً در روش‌های رشته JS برای اطلاعات بیشتر بخوانید.

Array.isArray()

isArray() این روش بررسی می‌کند که آیا یک شیء آرایه است یا خیر.

مثال

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

آزمایش کنید

لطفاً در JS آرایه برای اطلاعات بیشتر بخوانید.

Array.forEach()

forEach() این روش برای هر عنصر آرایه یک بار فراخوانی می‌کند.

مثال

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.map()

این مثال برای هر عنصر آرایه، ارزش آن را دو برابر می‌کند:

مثال

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.filter()

این مثال برای ایجاد یک آرایه جدید از عناصر با ارزش بیشتر از 18 استفاده می‌کند:

مثال

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.reduce()

این مثال مجموع تمام اعداد موجود در آرایه را تعیین می‌کند:

مثال

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.reduceRight()

این مثال نیز برای تعیین مجموع همه اعداد در آرایه است:

مثال

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.every()

این مثال بررسی می‌کند که آیا همه مقادیر از 18 بیشتر هستند یا خیر:

مثال

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.some()

این مثال بررسی می‌کند که آیا برخی از مقادیر از 18 بیشتر هستند یا خیر:

مثال

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.indexOf()

جستجو در یک عنصر خاص از آرایه و بازگشت موقعیت آن:

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JSبرای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

Array.lastIndexOf()

Array.lastIndexOf() با Array.indexOf() مثل این است، اما از انتهای آرایه شروع به جستجو می‌کند.

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

آزمایش کنید

لطفاً در روش‌های تکرار آرایه JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

JSON.parse()

یکی از کاربردهای رایج JSON دریافت داده‌ها از سرور وب است.

تصور کنید، شما این رشته متن را از سرور وب دریافت می‌کنید:

'{"name":"Bill", "age":62, "city":"Seatle"}'

توابع JavaScript JSON.parse() این برای تبدیل متن به شیء JavaScript استفاده می‌شود:

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

آزمایش کنید

document.getElementById("demo").innerHTML = myJSON; لطفاً در برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

JSON.stringify()

یکی از کاربردهای رایج JSON ارسال داده‌ها به سرور وب است.

هنگام ارسال داده‌ها به سرور وب، داده‌ها باید به صورت رشته باشند.

تصور کنید، ما در JavaScript این شیء را داریم:

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

لطفاً از تابع JSON.stringify() در JavaScript برای تبدیل آن به رشته استفاده کنید.

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

نتیجه یک رشته خواهد بود که از قالب JSON پیروی می‌کند.

myJSON حالا یک رشته است، آماده برای ارسال به سرور:

مثال

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);

آزمایش کنید

document.getElementById("demo").innerHTML = myJSON; لطفاً در برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

var timInMSs = Date.now();

تدریس JSON

مثال

Date.now() تعداد میلی‌ثانیه‌های گذشته از تاریخ صفر (1 ژانویه 1970 00:00:00:00) را برمی‌گرداند.

آزمایش کنید

var timInMSs = Date.now(); Date.now()

لطفاً در برگشت به همان نتیجه‌ای است که از اجرای getTime() روی شیء Date انجام می‌شود. تاریخ جاوااسکریپت

برای اطلاعات بیشتر بخوانید.

getter و setter ویژگی

ES5 به شما اجازه می‌دهد تا با استفاده از دستورات مشابه دریافت و تنظیم ویژگی‌ها، روش‌های شیء را تعریف کنید. و یکgetter

مثال

// ایجاد شیء:
var person = {
  firstName: ", Bill",
  lastName : "Gates",
  این مثال برای ویژگی به نام fullName یک
    get fullName() {
  }
});
// از getter برای نمایش داده‌های وارد شده از شیء استفاده کنید:
return this.firstName + " " + this.lastName;

آزمایش کنید

document.getElementById("demo").innerHTML = person.fullName; این مثال برای ویژگی زبان یک setter و یکgetter

مثال

var person = {
  firstName: ", Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// از setter برای تنظیم ویژگی‌های شیء استفاده کنید:
person.lang = "en";
// از getter برای نمایش داده‌های وارد شده از شیء استفاده کنید:
document.getElementById("demo").innerHTML = person.lang;

آزمایش کنید

این مثال از setter برای اطمینان از به‌روزرسانی بزرگ‌تر زبان استفاده می‌کند:

مثال

var person = {
  firstName: ", Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// از setter برای تنظیم ویژگی‌های شیء استفاده کنید:
person.lang = "en";
// داده‌های وارد شده از شیء را نمایش دهید:
document.getElementById("demo").innerHTML = person.language;

آزمایش کنید

لطفاً در مدیران دسترسی شیء جاوااسکریپت برای اطلاعات بیشتر در مورد getter و setter در اینجا بخوانید.

ویژگی‌ها و روش‌های جدید شیء

Object.defineProperty() این یک روش جدید شیء در ES5 است.

این امکان را می‌دهد که شما بتوانید ویژگی‌های شیء را تعریف کنید و/یا ارزش‌ها و/یا داده‌های meta را تغییر دهید.

مثال

// ایجاد شیء:
var person = {
  firstName: ", Bill",
  lastName : "Gates",
  language : "NO", 
});
// تغییر ویژگی:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// شمارش ویژگی‌ها
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

آزمایش کنید

مثال بعدی کد مشابهی است، اما ویژگی زبان را در لیست قابل شمارش مخفی می‌کند:

مثال

// ایجاد شیء:
var person = {
  firstName: ", Bill",
  lastName : "Gates",
  language : "NO", 
});
// تغییر ویژگی:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// شمارش ویژگی‌ها
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

آزمایش کنید

این مثال یک setter و getter ایجاد می‌کند تا به‌روزرسانی بزرگ‌تر زبان را تضمین کند:

مثال

// ایجاد شیء:
var person = {
  firstName: ", Bill",
  lastName : "Gates",
  language : "NO"
});
// تغییر ویژگی:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// تغییر زبان
person.language = "en";
// نمایش زبان
document.getElementById("demo").innerHTML = person.language;

آزمایش کنید

روش‌های جدید شیء ES5

ECMAScript 5 بسیاری از روش‌های جدید شیء را به JavaScript اضافه کرده است:

// افزودن یا تغییر ویژگی در یک شیء
Object.defineProperty(object, property, descriptor)
// افزودن یا تغییر چندین ویژگی در یک شیء
Object.defineProperties(object, descriptors)
// دسترسی به ویژگی
Object.getOwnPropertyDescriptor(object, property)
// به عنوان آرایه‌ای تمام مقادیر را برمی‌گرداند
Object.getOwnPropertyNames(object)
// به عنوان آرایه‌ای تمام مقادیر قابل شمارش را برمی‌گرداند
Object.keys(object)
// دسترسی به پروتوتایپ
Object.getPrototypeOf(object)
// از اضافه کردن ویژگی‌ها به شیء جلوگیری می‌کند
Object.preventExtensions(object)
// اگر می‌توان ویژگی‌های جدید به شیء اضافه کرد، true بازمی‌گردد
Object.isExtensible(object)
// از تغییر ویژگی‌های شیء (نه ارزش‌ها) جلوگیری می‌کند
Object.seal(object)
// اگر شیء بسته شده باشد، true بازمی‌گردد
Object.isSealed(object)
// از تغییر شیء جلوگیری می‌کند
Object.freeze(object)
// اگر شیء فریز شده باشد، true بازمی‌گردد
Object.isFrozen(object)

لطفاً در شیء ECMAScript5 برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

دسترسی به ویژگی‌های رشته

charAt() این روش‌ها بازمی‌گردد به کاراکتر مشخص شده در موقعیت معین رشته:

مثال

var str = "HELLO WORLD";
str.charAt(0);            // بازمی‌گردد به H

آزمایش کنید

ECMAScript 5 اجازه می‌دهد که به ویژگی‌های رشته دسترسی شود:

مثال

var str = "HELLO WORLD";
str[0];                   // بازمی‌گردد به H

آزمایش کنید

دسترسی به ویژگی‌های رشته ممکن است کمی غیرقابل پیش‌بینی باشد.

لطفاً در روش‌های رشته JS برای یادگیری بیشتر مطالب به اینجا مراجعه کنید.

کاما پیروی نکردن (Trailing Commas)

ECMAScript 5 اجازه می‌دهد که از کاما پیروی نکردن در تعریف شیء و آرایه استفاده شود:

مثال شیء

person = {
  firstName: ", Bill",
  lastName: ", Gates",
  age: 62,
}

مثال آرایه

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

اخطار!!!

اینترنت اکسپلورر 8 از کار خواهد افتاد.

JSON از استفاده از کاما پیروی نکردن اجازه نمی‌دهد.

مجموعه JSON:

// مجاز است:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)
// نه مجاز است:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)

مجموعه JSON:

// مجاز است:
points = [40, 100, 1, 5, 25, 10]
// نه مجاز است:
points = [40, 100, 1, 5, 25, 10,]

رشته‌های چند خطی

اگر از اسلش برای اضافه کردن به رشته‌های چند خطی استفاده شود، ECMAScript 5 اجازه می‌دهد که رشته‌های چند خطی (لیترال‌های چند خطی) چند خطی باشند:

مثال

"Hello \
Kitty!";

آزمایش کنید

مетод \ ممکن است به طور کلی پشتیبانی نشده باشد.

مرورگرهای قدیمی‌تر ممکن است به روش‌های مختلفی با فاصله اطراف کاراکتر اسلش (backslash) رفتار کنند.

بعضی از مرورگرهای قدیمی اجازه نمی‌دهند که فاصله بعد از کاراکتر \ باشد.

یکی از روش‌های امن‌تر برای شکستن یک رشته متنی به بخش‌های مختلف استفاده از اضافه کردن رشته است:

مثال

"Hello " + 
"Kitty!";

آزمایش کنید

استفاده از کلمات محفوظ به عنوان نام ویژگی‌ها

ECMAScript 5 اجازه می‌دهد که کلمات محفوظ به عنوان نام ویژگی‌ها استفاده شوند:

مثال اشیاء

var obj = {name: "Bill", new: "yes"}

آزمایش کنید

پشتیبانی مرورگرها از ES5 (ECMAScript 5)

Chrome 23، IE 10 و Safari 6 اولین مرورگرهایی هستند که ECMAScript 5 را به طور کامل پشتیبانی می‌کنند:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
سپتامبر 2012 سپتامبر 2012 آوریل 2013 ژوئیه 2012 ژوئیه 2013