نمایش اشیاء

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


چگونه اشیاء را در جاوا اسکریپت نمایش دهیم؟

نمایش دادن یک شیء جاوا اسکریپت [object Object] بعنوان خروجی خواهد داد.[۱]

مثال

var person = {name:"John", age:30, city:"New York"};

document.getElementById("demo").innerHTML = person;


مشاهدهٔ نتیجه


برخی از راه حل‌های رایج برای نمایش اشیاء جاوا اسکریپت عبارتند از:

  • نمایش دادن ویژگی‌های شیء (Object Properties) بوسیله نام
  • نمایش دادن ویژگی‌های شیء در یک حلقه
  • نمایش داده شیء با استفاده از Object.values()
  • نمایش دادن شیء با استفاده از JSON.stringify()

نمایش ویژگی های شیء

ویژگی‌های یک شیء را می‌توان بعنوان یک رشته نمایش داد:

مثال

var person = {name:"John", age:30, city:"New York"};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;


مشاهدهٔ نتیجه


نمایش شیء در یک حلقه

ویژگی‌های یک شیء را می‌توان در یک حلقه جمع آوری کرد:

مثال

var x, txt = "";
var person = {name:"John", age:30, city:"New York"};

for (x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = text;


مشاهدهٔ نتیجه


باید از person[x] در حلقه استفاده کنید.

person.x کار نخواهد کرد (زیرا x یک متغیر است).

استفاده از Object.values()

هر شیء جاوا اسکریپت را می‌توان با استفاده از Object.values() به یک آرایه تبدیل کرد:

var person = {name:"John", age:30, city:"New York"};

var myArray = Object.values(person);

اکنون myArray یک آرایه جاوا اسکریپت است، آماده برای نمایش:

مثال

var person = {name:"John", age:50, city:"New York"};

var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;


مشاهدهٔ نتیجه


Object.values() از سال ۲۰۱۶ در همه مرورگرهای اصلی از پشتیبانی می‌شود.

Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
۵۴ (۲۰۱۶) ۱۴ (۲۰۱۶) ۴۷ (۲۰۱۶) ۱۰ (۲۰۱۶) ۴۱ (۲۰۱۶)


استفاده از JSON.stringify()

با استفاده تابع JSON.stringify() می‌توان هر شیء جاوا اسکریپت را stringify کرد (به رشته تبدیل کرد):

var person = {name:"John", age:30, city:"New York"};

var myString = JSON.stringify(person);

اکنون myString یک رشته جاوا اسکریپتی است، آماده برای نمایش:

var person = {name:"John", age:30, city: "New York"};

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;


مشاهدهٔ نتیجه


نتیجه یک رشته خواهد بود که از نشانه‌گذاری JSON پیروی می‌کند:

{"name":"John","age":50,"city":"New York"}
var person = {name:"John", today:new Date()};

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

JSON.stringify() در جاوا اسکریپت قرار داده شده و در همه مرورگرهای اصلی پشتیبانی می‌شود.

Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
بله ۸٫۰ ۳٫۵ ۴٫۰ ۱۰٫۵


تبدیل تاریخ ها به رشته

JSON.stringify تاریخ‌ها را به رشته‌ها تبدیل می‌کند:

var person = {name:"John", age:function () {return 30;}};

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;


مشاهدهٔ نتیجه


تبدیل توابع به رشته

JSON.stringify توابع را به رشته تبدیل نخواهد کرد:

var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myJSON;


مشاهدهٔ نتیجه


این مشکل را می‌توان «حل کرد» اگر توابع را پیش از stringify کردن به رشته تبدیل کنیم.

var arr = ["John", "Peter", "Sally", "Jane"];

var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;


مشاهدهٔ نتیجه


تبدیل آرایه ها به رشته

همچنین تبدیل آرایه‌های جاوا اسکریپت به رشته نیز امکان پذیر است:

var arr = ["John", "Peter", "Sally", "Jane"];

var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;


مشاهدهٔ نتیجه


نتیجه، رشته‌ای خواهد بود که از نشانه‌گذاری JSON پیروی می‌کند:

["John","Peter","Sally","Jane"]

منابع آموزشی