JavaScript 中的地址格式

地址是我們日常生活的基本組成部分，無論我們是發送郵件、訂購包裹還是導航到新位置。但在程式碼中處理地址時，事情可能會變得棘手。不同的國家/地區具有獨特的地址格式，即使在同一個國家/地區內，地址的結構也可能存在差異。在本指南中，我們將探討位址格式化的基礎知識，並了解一些在 JavaScript 中處理位址的技術。

了解全球地址結構

當您建立處理地址的應用程式時，您需要為複雜的世界做好準備。地址看起來很簡單——只是幾行文字告訴郵遞員要去哪裡，對吧？但是，當您深入了解全球地址結構的本質時，您很快就會發現它的內涵遠比表面看起來的要複雜。

基本地址組成部分

位址的核心由幾個關鍵組成部分組成：

1. 街道地址：這是您的門牌號碼和街道名稱。想想“123 Main Street”。它是任何地址的基礎，可以準確地告訴別人您所在街道的位置。

2. 城市/城鎮：接下來是城市或城鎮名稱，也就是您的地址所在的社區。它有助於將搜尋範圍從全球或國家範圍縮小到更本地化的範圍。

3. 州/省/地區：根據國家/地區的不同，這可能是州、省或地區。在美國，您將包括州（例如伊利諾伊州的 I.L.）；在英國，您可能會使用縣名。

4. 郵遞區號/郵遞區號：這個方便的小系列數字（有時是字母）對於郵遞區號快速識別地址的大致區域至關重要。它就像一個密碼，可以加快交付過程。

5. 國家/地區：最後但同樣重要的一點是，國家/地區名稱告訴您該地址屬於世界的哪個部分。它對於國際郵件至關重要，可確保您的信件不會到達地球的另一端。

地區差異

現在，事情變得有趣了。雖然地址的組成部分似乎是通用的，但它們的排列和格式化方式因地點而異。

• 美國：在美國，地址通常遵循街道地址、城市、州和郵政編碼的格式，所有這些都在一個整潔的包中。

例如：

123 Main Street
Springfield, IL 62704
USA

• 英國：跨越大西洋到英國，你會發現郵遞區號排在第一位，而且通常更強調城鎮和縣。例如：
  

  10 Downing Street
  London SW1A 2AA
  England
  

• 日本：在日本，事情發生了翻天覆地的變化。地址從最大的地理區域（縣）開始，然後放大到城市、區，最後是建築物編號：
  

  〒100-0001
  東京都千代田区千代田1-1
  Japan
  

• 德國：在德國，郵遞區號位於城市名稱之前，門牌號碼通常位於街道名稱之後：
  

  Hauptstraße 5
  10115 Berlin
  Germany
  

這些地區差異只是冰山一角。一些國家/地區包括行政區域，而其他國家可能完全跳過特定組成部分。您的程式碼需要足夠聰明才能適應這些格式，確保每個位址都能正確顯示，無論它來自哪裡。

JavaScript 中的地址格式

所以你已經獲得了地址的所有部分，但是如何將它們組合在一起呢？在 JavaScript 中格式化位址有多種方法，從簡單的字串操作到使用專門的程式庫。讓我們深入研究一些能讓您的程式碼奏效的範例！

使用模板文字

第一種方法是使用模板文字。它們是一種超級簡單易讀的方法，可以將您的地址組件組合成格式良好的字串。您可以這樣做：

const address = {
    street: '123 Main Street',
    city: 'Springfield',
    state: 'IL',
    zip: '62704',
    country: 'USA',
};

const formattedAddress = `${address.street}
${address.city}, ${address.state} ${address.zip}
${address.country}`;

console.log(formattedAddress);

當您執行此程式碼時，它將列印出：

123 Main Street
Springfield, IL 62704
USA

當您擁有所有組件時，此方法非常有效，但如果需要添加一些組件怎麼辦？您可能想為此添加更多邏輯。

處理可選組件

有時，地址沒有填寫所有欄位 - 也許您沒有州或郵遞區號。您可以使用條件檢查來處理這些情況：

const address = {
    street: '221B Baker Street',
    city: 'London',
    postalCode: 'NW1 6XE',
    country: 'UK',
};

let formattedAddress = `${address.street}
${address.city}`;

if (address.state) {
    formattedAddress += `, ${address.state}`;
}

if (address.postalCode) {
    formattedAddress += ` ${address.postalCode}`;
}

formattedAddress += `
${address.country}`;

console.log(formattedAddress);

此程式碼透過在將缺少的元件新增至格式化位址之前檢查它們是否存在來優雅地處理遺失的元件。

如果你運行這個，它將輸出：

221B Baker Street
London NW1 6XE
UK

Using a Formatting Function

You might want to encapsulate your logic in a reusable function for more complex scenarios. Here's an example of a function that formats an address based on the provided components:

function formatAddress(address) {
    const { street, city, state, zip, country } = address;
    return `${street || ''}
${city || ''}${state ? `, ${state}` : ''}${zip ? ` ${zip}` : ''}
${country || ''}`.trim();
}

const address = {
    street: '1600 Pennsylvania Avenue NW',
    city: 'Washington',
    state: 'DC',
    zip: '20500',
    country: 'USA',
};

console.log(formatAddress(address));

This function checks for each component and adds it if present. It also trims any extra whitespace, ensuring your address looks clean and tidy. When you run this code, you'll see:

1600 Pennsylvania Avenue NW
Washington, DC 20500
USA

JavaScript Libraries for Address Formatting

When it comes to formatting addresses, especially for international applications, handling the nuances of various address formats can become a bit of a juggling act. Thankfully, some great JavaScript libraries make this task much easier. Let's take a look at a few of the best ones.

1. @fragaria/address-formatter

The @fragaria/address-formatter library is a robust solution for formatting international postal addresses. It's designed to handle data from sources like OpenStreetMap's Nominatim API, and it can automatically detect and format addresses according to the customs of different countries.

Key Features:

• Automatic Country Detection: The library can automatically detect the country and format the address accordingly.
• Customizable Output: You can specify the output format, whether you want the whole country name, an abbreviation, or even an array of address lines.
• Support for Abbreviations: Common names like "Avenue" or "Road" can be automatically abbreviated to "Ave" or "Rd."

Example:

const addressFormatter = require('@fragaria/address-formatter');

const address = {
    houseNumber: 301,
    road: 'Hamilton Avenue',
    city: 'Palo Alto',
    postcode: 94303,
    state: 'CA',
    country: 'United States of America',
    countryCode: 'US',
};

const formattedAddress = addressFormatter.format(address);
console.log(formattedAddress);

This will format the address according to U.S. standards, handling any variations seamlessly.

2. i18n-postal-address

The i18n-postal-address library is another fantastic option for international address formatting. It allows for region-specific formatting and supports various attributes such as honorifics, company names, and multiple address lines.

Key Features:

• Region-Specific Formatting: Format addresses according to the region's specific postal standards.
• Chaining Methods: You can chain methods for setting different address components, making the code cleaner and more readable.
• Customizable Formats: You can add or modify address formats for different countries.

Example:

const PostalAddress = require('i18n-postal-address');

const myAddress = new PostalAddress();
myAddress
    .setAddress1('1600 Amphitheatre Parkway')
    .setCity('Mountain View')
    .setState('CA')
    .setPostalCode('94043')
    .setCountry('USA');

console.log(myAddress.toString());

This library is highly flexible and is ideal for applications that need to handle a wide variety of address formats.

3. localized-address-format

If you're looking for something lightweight and zero-dependency, localized-address-format might be your go-to. It's based on Google's libaddressinput and offers simple yet effective address formatting for various locales.

Key Features:

• Zero Dependencies: No external dependencies, making it a lightweight option.
• Localized Formatting: Formats addresses according to the local script or the Latin script, depending on your needs.
• Straightforward API: Simple to use with minimal configuration required.

Example:

import { formatAddress } from 'localized-address-format';

const formattedAddress = formatAddress({
    postalCountry: 'US',
    administrativeArea: 'CA',
    locality: 'San Francisco',
    postalCode: '94103',
    addressLines: ['123 Mission St'],
}).join('\n');

console.log(formattedAddress);

This library is perfect if you need something that works out of the box with minimal fuss.

Address Validation

Formatting addresses is one thing, but what about validating them? Ensuring an address is correct and complete is a crucial step in any application dealing with physical mail or deliveries. Fortunately, several tools and services are available to help you validate addresses effectively.

1. Google Maps Geocoding API

Google Maps Geocoding API is a powerful tool that can help you validate and geocode addresses. You can get detailed information about the location by sending a request to the API with an address, including latitude and longitude coordinates. This can be useful for verifying addresses and ensuring that they are accurate.

Example:

const axios = require('axios');

const address = '1600 Amphitheatre Parkway, Mountain View, CA 94043';

axios
    .get('https://maps.googleapis.com/maps/api/geocode/json', {
        params: {
            address: address,
            key,
        },
    })
    .then((response) => {
        const { results } = response.data;
        if (results.length > 0) {
            const { formatted_address, geometry } = results[0];
            console.log(`Formatted Address: ${formatted_address}`);
            console.log(`Latitude: ${geometry.location.lat}`);
            console.log(`Longitude: ${geometry.location.lng}`);
        } else {
            console.log('Address not found');
        }
    })
    .catch((error) => {
        console.error(error);
    });

This code sends a request to the Google Maps Geocoding API with an address and retrieves the formatted address, latitude, and longitude coordinates.

2. Comprehensive Validation with validator.js

You can use a library like validator.js if you need more comprehensive address validation. It offers a wide range of validation functions, including those for email addresses, URLs, and, of course, addresses. You can use the isPostalCode function to validate postal codes and ensure they match the expected format. Here's an example:

const validator = require('validator');

const postalCode = '94043';

if (validator.isPostalCode(postalCode, 'US')) {
    console.log('Valid postal code');
} else {
    console.log('Invalid postal code');
}

This code validates a U.S. postal code using the isPostalCode function. You can specify the country code to ensure that the postal code matches the expected format for that country.

3. Address Validation Services

You can turn to specialized address validation services like SmartyStreets, Loqate, or Melissa Data for more advanced address validation needs. These services offer real-time address validation, correction, and geocoding capabilities, ensuring your addresses are accurate and deliverable. While these services often come with a cost, they can be invaluable for applications that rely on accurate address data.

Example:

const SmartyStreets = require('smartystreets-api');

const client = SmartyStreets({
    auth: {
        id: 'your-auth-id
        token
    }
});

const address = {
    street: '1600 Amphitheatre Parkway',
    city: 'Mountain View',
    state: 'CA',
    postalCode: '94043',
    country: 'USA'
};

client.validateAddress(address)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.error(error);
    });

This code uses the SmartyStreets API to validate an address and returns detailed information about the address, including any corrections made.

Summary

Address formatting might seem simple, but when dealing with addresses from around the world, things can get complex quickly. By understanding the basic components of an address and the regional variations, you can build more robust applications that easily handle addresses. Whether you're using simple string manipulation or powerful libraries, JavaScript offers a range of tools to help you format addresses effectively. Choose the method that best fits your needs, and start formatting addresses like a pro!

以上是JavaScript 中的地址格式的詳細內容。更多資訊請關注PHP中文網其他相關文章！