كيفية عرض أسماء المناطق الزمنية مثل PST أو Pacific Standard Time

مقدمة

عند عرض وقت للمستخدمين، يساعد إظهار المنطقة الزمنية في فهم ما إذا كان الوقت في منطقتهم المحلية أو منطقة مختلفة. اجتماع مجدول في 3:00 PM PST يخبر المستخدم أنه بحاجة إلى التحويل من توقيت المحيط الهادئ. بدون تسمية PST، يجب على المستخدم تخمين المنطقة الزمنية المطبقة.

يمكن أن تظهر المناطق الزمنية بتنسيقات متعددة. يمكنك عرض أسماء مختصرة مثل PST، أو أسماء كاملة مثل Pacific Standard Time، أو تنسيقات تعتمد على فارق التوقيت مثل GMT-8. تخدم التنسيقات المختلفة أغراضاً مختلفة. الاختصارات توفر المساحة لكنها قد تكون غامضة. الأسماء الكاملة واضحة لكنها تشغل مساحة أكبر. فوارق التوقيت تعمل عندما يكون اسم المنطقة المحدد أقل أهمية من فرق الساعات.

توفر JavaScript واجهة برمجة التطبيقات Intl.DateTimeFormat لعرض أسماء المناطق الزمنية تلقائياً. يشرح هذا الدرس ماهية أسماء المناطق الزمنية، وكيف تتغير بين التوقيت الصيفي والشتوي، وكيفية عرضها بتنسيقات مختلفة.

فهم تنسيقات أسماء المناطق الزمنية

تظهر أسماء المناطق الزمنية بعدة تنسيقات مميزة، كل منها له خصائص مختلفة.

تستخدم الأسماء المختصرة اختصارات مثل PST، أو EST، أو JST. هذه توفر المساحة لكنها قد تكون غامضة. CST يمكن أن يعني التوقيت المركزي القياسي في أمريكا الشمالية، أو التوقيت القياسي الصيني، أو التوقيت القياسي الكوبي.

تكتب الأسماء الكاملة اسم المنطقة الزمنية بالكامل مثل Pacific Standard Time، أو Eastern Standard Time، أو Japan Standard Time. هذه تتجنب الغموض لكنها تشغل مساحة أكبر.

تشير الأسماء العامة إلى المنطقة الزمنية دون تحديد ما إذا كانت تتبع حاليًا التوقيت القياسي أو التوقيت الصيفي. PT يعني التوقيت الهادئ، والذي يمكن أن يكون إما PST أو PDT حسب التاريخ.

تعرض تنسيقات الإزاحة فرق الساعات عن التوقيت العالمي المنسق (UTC). GMT-8 يعني 8 ساعات خلف توقيت غرينتش. GMT-05:00 يعني 5 ساعات خلف مع نقطتين رأسيتين تفصلان الساعات والدقائق.

يعتمد التنسيق الذي تختاره على حالة الاستخدام الخاصة بك. استخدم الأسماء المختصرة عندما تكون المساحة محدودة والغموض مقبول. استخدم الأسماء الطويلة عندما تكون الوضوح أهم من المساحة. استخدم الإزاحات عندما تحتاج إلى إظهار العلاقة الرقمية مع التوقيت العالمي المنسق.

استخدام Intl.DateTimeFormat لعرض أسماء المناطق الزمنية

يقبل منشئ Intl.DateTimeFormat خيار timeZoneName الذي يتحكم في كيفية ظهور أسماء المناطق الزمنية في التواريخ والأوقات المنسقة.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM PST"

ينشئ هذا منسقًا للإنجليزية الأمريكية يعرض الوقت في المنطقة الزمنية America/Los_Angeles. يضيف خيار timeZoneName: 'short' اسم المنطقة الزمنية المختصر إلى المخرجات. تتضمن النتيجة PST في النهاية.

يحدد خيار timeZone المنطقة الزمنية التي سيتم استخدامها عند التنسيق. يتحكم خيار timeZoneName في ما إذا كان سيتم عرض اسم المنطقة الزمنية وكيفية عرضه. يعمل هذان الخياران معًا. يحدد timeZone التحويل، بينما يحدد timeZoneName التسمية.

عرض أسماء المناطق الزمنية المختصرة

يعرض خيار timeZoneName: 'short' أسماء المناطق الزمنية المختصرة.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 10:30 AM EST"

ينتج التنسيق المختصر EST للتوقيت الشرقي القياسي. هذا التنسيق مضغوط ويعمل بشكل جيد في الجداول أو القوائم أو التخطيطات الأخرى ذات المساحة المحدودة.

تنتج المناطق الزمنية المختلفة اختصارات مختلفة.

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// Output:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

تنتج كل منطقة زمنية اختصارها القياسي. يستخدم المحيط الهادئ PST، ويستخدم الوسط CST، ويستخدم الشرقي EST، وتستخدم لندن GMT، وتستخدم طوكيو JST.

عرض أسماء المناطق الزمنية الطويلة

يعرض الخيار timeZoneName: 'long' أسماء المناطق الزمنية الكاملة.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM Pacific Standard Time"

ينتج التنسيق الطويل Pacific Standard Time بدلاً من PST. يزيل هذا الغموض ولكنه يستهلك مساحة أكبر بكثير.

تعمل الأسماء الطويلة بشكل جيد عندما يكون الوضوح ضرورياً وتتوفر المساحة.

const date = new Date('2025-01-15T15:30:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(date));
// Output: "10:30 AM Eastern Standard Time"

يوضح الاسم الكامل المنطقة الزمنية المطبقة دون الحاجة إلى فك تشفير الاختصار.

عرض إزاحات المناطق الزمنية

يعرض الخيار timeZoneName: 'shortOffset' إزاحة UTC بتنسيق مضغوط.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-8"

يعرض هذا GMT-8 للإشارة إلى أن المنطقة الزمنية متأخرة 8 ساعات عن UTC. يعمل تنسيق الإزاحة بشكل جيد عندما يكون اسم المنطقة الزمنية المحدد أقل أهمية من العلاقة الرقمية مع UTC.

يعرض الخيار timeZoneName: 'longOffset' الإزاحة بالساعات والدقائق.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-08:00"

يعرض هذا GMT-08:00 مع نقطتين رأسيتين بين الساعات والدقائق. هذا التنسيق أكثر دقة ويتبع اتفاقيات ISO 8601.

تعرض المناطق الزمنية ذات الإزاحات نصف ساعة أو 45 دقيقة الإزاحة الكاملة بالتنسيق الطويل.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "9:00 PM GMT+05:30"

التوقيت القياسي الهندي لديه إزاحة قدرها 5 ساعات و30 دقيقة عن التوقيت العالمي المنسق. يعرض تنسيق الإزاحة الطويل هذا كـ GMT+05:30.

عرض أسماء المناطق الزمنية العامة

يعرض خيار timeZoneName: 'shortGeneric' اختصارًا عامًا ينطبق بغض النظر عما إذا كان التوقيت الصيفي نشطًا أم لا.

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// Output: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Output: "8:30 AM PT"

تعرض تواريخ الشتاء والصيف PT لتوقيت المحيط الهادئ. لا يميز التنسيق العام بين التوقيت القياسي للمحيط الهادئ والتوقيت الصيفي للمحيط الهادئ. يعمل هذا عندما تريد تسمية متسقة بغض النظر عن الموسم.

يوفر خيار timeZoneName: 'longGeneric' الاسم العام الكامل.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM Pacific Time"

يعرض هذا Pacific Time بدلاً من Pacific Standard Time. يوفر التنسيق الطويل العام وضوحًا دون تحديد التوقيت القياسي أو الصيفي.

كيف يؤثر التوقيت الصيفي على أسماء المناطق الزمنية

تتغير أسماء المناطق الزمنية بين التوقيت القياسي والتوقيت الصيفي. يعكس خيار timeZoneName هذا التغيير تلقائيًا.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Output: "8:30 AM PDT"

في يناير، يعرض المنسق PST للتوقيت القياسي للمحيط الهادئ. في يوليو، يعرض PDT للتوقيت الصيفي للمحيط الهادئ. يختار المنسق الاسم الصحيح تلقائيًا بناءً على التاريخ.

تتغير الإزاحة أيضًا بين التوقيت القياسي والتوقيت الصيفي.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Output: "8:30 AM GMT-7"

في الشتاء، يكون توقيت المحيط الهادئ GMT-8. في الصيف، يكون GMT-7. تتغير الإزاحة بمقدار ساعة واحدة عندما يبدأ التوقيت الصيفي.

تعكس الأسماء الطويلة أيضًا التغيير.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Output: "8:30 AM Pacific Daylight Time"

يتغير التنسيق الطويل من Pacific Standard Time إلى Pacific Daylight Time. يتعامل المنسق مع هذه التحولات تلقائيًا بناءً على التاريخ والمنطقة الزمنية.

عرض أسماء المناطق الزمنية بلغات مختلفة

تظهر أسماء المناطق الزمنية بشكل مختلف في اللغات المختلفة. يحدد معرّف اللغة المحلية اللغة التي يستخدمها المنسق لأسماء المناطق الزمنية.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// Output: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// Output: "07:30 heure normale du Pacifique"

تعرض الإنجليزية Pacific Standard Time. تعرض الإسبانية hora estándar del Pacífico. تعرض الفرنسية heure normale du Pacifique. تستخدم كل لغة ترجمتها الخاصة لاسم المنطقة الزمنية.

غالباً ما تبقى الأسماء المختصرة كما هي عبر اللغات لأنها اختصارات.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM PST"

console.log(esFormatter.format(date));
// Output: "7:30 PST"

تستخدم كل من الإنجليزية والإسبانية PST للاختصار القصير. ومع ذلك، تحذف الإسبانية مؤشر AM في هذا المثال لأن اصطلاحات التنسيق الإسبانية تختلف عن الإنجليزية.

تبقى الإزاحات رقمية عبر جميع اللغات.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Output: "7:30 GMT-08:00"

تعرض كل من الإنجليزية واليابانية GMT-08:00 للإزاحة. لا تتطلب الإزاحات الرقمية ترجمة.

عرض اسم المنطقة الزمنية فقط

يمكنك عرض اسم المنطقة الزمنية فقط من خلال حذف مكونات التاريخ والوقت الأخرى.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Pacific Standard Time"

عندما تحدد timeZoneName فقط دون خيارات أخرى، يُخرج المنسق اسم المنطقة الزمنية فقط. يعمل هذا عندما تحتاج إلى عرض المنطقة الزمنية بشكل منفصل عن التاريخ والوقت.

يمكنك استخدام هذا لإنشاء تسميات أو مفاتيح توضيحية.

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'long'
});

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// Output:
// Pacific Standard Time (or Pacific Daylight Time depending on date)
// Central Standard Time (or Central Daylight Time depending on date)
// Eastern Standard Time (or Eastern Daylight Time depending on date)
// Greenwich Mean Time (or British Summer Time depending on date)
// Japan Standard Time

ينشئ هذا قائمة بأسماء المناطق الزمنية مناسبة للعرض في قائمة منسدلة أو واجهة اختيار.

دمج أسماء المناطق الزمنية مع تنسيقات تاريخ محددة

يمكنك دمج أسماء المناطق الزمنية مع خيارات تنسيق محددة للتاريخ والوقت.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025, 10:30 AM EST"

يدمج هذا تنسيق تاريخ كامل مع اسم المنطقة الزمنية المختصر. يتضمن الناتج يوم الأسبوع، واسم الشهر الكامل، واليوم، والسنة، والوقت، واختصار المنطقة الزمنية.

يمكنك استخدام هذا لإنشاء عروض كاملة للتاريخ والوقت.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

لاحظ أن خيار timeZoneName لا يمكن استخدامه مع dateStyle أو timeStyle. إذا كنت بحاجة إلى استخدام اختصارات الأنماط، فإن اسم المنطقة الزمنية مضمن بالفعل في أنماط الوقت long و full.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

يتضمن نمط الوقت long تلقائياً اسم المنطقة الزمنية المختصر. لا تحتاج إلى تحديد timeZoneName بشكل منفصل.

عرض أسماء المناطق الزمنية لجداول الأحداث

تساعد أسماء المناطق الزمنية المستخدمين على فهم موعد حدوث الأحداث عبر مناطق مختلفة.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'short',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// Output:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

يتم عرض كل حدث بمنطقته الزمنية المحلية. يمكن للمستخدمين رؤية أن اجتماع البداية في الساعة 9:00 صباحاً بالتوقيت الشرقي، ومراجعة التصميم في الساعة 9:00 صباحاً بتوقيت المحيط الهادئ، وتخطيط السبرينت في الساعة 10:00 صباحاً بتوقيت اليابان.

يمكنك أيضاً عرض نفس الحدث في مناطق زمنية متعددة.

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// Output:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

يعرض هذا وقت اجتماع واحد محولاً إلى مناطق زمنية متعددة. يمكن لأعضاء الفريق في مناطق مختلفة العثور على وقتهم المحلي بسرعة.