ناوبری امن از نال (?.) (Null-Safe Navigation (?.))

اینجا «ناوبری امن از نال (Null-Safe Navigation)» را می شناسی. با عملگر ?. مقدارهای اختیاری را بی خطا می خوانیم. همچنین با ?? مقدار پیش فرض می دهیم.

ناوبری امن از نال (?.) چیست؟

?. یعنی اگر هر بخش مسیر تهی بود، خطا نده و نتیجه را نامشخص بگیر. بنابراین مسیرهای عمیق ایمن می شوند و صفحه نمی پَرَد.

کِی از ?. استفاده کنیم؟

وقتی داده اختیاری است یا دیر می رسد. همچنین بهتر از شرط های طولانی است. با ?? هم جای خالی را پر کن.

نمونه اجرایی

کاربر را روشن و خاموش می کنیم. سپس ایمیل را ایمن می خوانیم.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)=\"toggle()\">Toggle user</button>
    <p>Email: {{ user?.profile?.email ?? '(none)' }}</p>
  `
})
export class App {
  user: { profile?: { email?: string } } | undefined = undefined;

  toggle(): void {
    if (this.user) {
      this.user = undefined;
    } else {
      this.user = { profile: { email: 'a@example.com' } };
    }
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

نکته: برای رشته خالی یا عدد صفر، از ?? استفاده کن. چون || آن ها را هم خالی فرض می کند.

گام های عملی

1. مسیر عمیق را با ?. ایمن کن.
2. برای پیش فرض از ?? کمک بگیر.
3. کد سنگین را در قالب نگذار؛ داخل کلاس ببر.
4. با دکمه، وضعیت را عوض کن و نتیجه را ببین.

پیوندها

راهنمای کامل در متغیرهای ارجاعی و ادامه مبحث در ریز نویسی دستوری. همچنین نمونه زنده W3Schools را ببین.

منبع W3Schools · اجرای زنده نمونه

جمع بندی سریع

• ?. خطاهای تهی را مهار می کند.
• ?? مقدار پیش فرض می گذارد.
• مسیرهای عمیق ایمن تر می شوند.
• کد تمیزتر و کوتاه تر می شود.