首页 > 文章 > web前端 > JavaScript 中的地址格式

JavaScript 中的地址格式

WBOY原创: 2024-08-06 01:15:521090浏览

Address Formatting in JavaScript

地址是我们日常生活的基本组成部分，无论我们是发送邮件、订购包裹还是导航到新位置。但在代码中处理地址时，事情可能会变得棘手。不同的国家/地区具有独特的地址格式，即使在同一个国家/地区内，地址的结构也可能存在差异。在本指南中，我们将探讨地址格式化的基础知识，并了解一些在 JavaScript 中处理地址的技术。

了解全球地址结构

当您构建处理地址的应用程序时，您需要为复杂的世界做好准备。地址可能看起来很简单——只是几行文字告诉邮递员要去哪里，对吧？但是，当您深入了解全球地址结构的本质时，您很快就会发现它的内涵远比表面看上去的要复杂。

基本地址组成部分

地址的核心由几个关键组成部分组成：

街道地址：这是您的门牌号码和街道名称。想想“123 Main Street”。它是任何地址的基础，可以准确告诉别人您所在街道的位置。
城市/城镇：接下来是城市或城镇名称，即您的地址所在的社区。它有助于将搜索范围从全球或国家范围缩小到更本地化的范围。
州/省/地区：根据国家/地区的不同，这可能是州、省或地区。在美国，您将包括州（例如伊利诺伊州的 I.L.）；在英国，您可能会使用县名。
邮政编码/邮政编码：这个方便的小系列数字（有时是字母）对于邮政服务快速识别地址的大致区域至关重要。它就像一个密码，可以加快交付过程。
国家/地区：最后但同样重要的一点是，国家/地区名称告诉您该地址属于世界的哪个部分。它对于国际邮件至关重要，可确保您的信件不会到达地球的另一端。

地区差异

现在，事情变得有趣了。虽然地址的组成部分似乎是通用的，但它们的排列和格式化方式因地点而异。

美国：在美国，地址通常遵循街道地址、城市、州和邮政编码的格式，所有这些都在一个整洁的包中。

例如：

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中文网其他相关文章！

JavaScript print String Array if for while format include mail Validating using finally Conditional JS number function this location zoom

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：- Dumps下一篇：How I Achieved Stars in eeks After Launching ScriptKavi/Hooks

查看更多