PHP前端开发

JavaScript 中的地址格式

百变鹏仔 3天前 #JavaScript
文章标签 地址

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

了解全球地址结构

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

基本地址组成部分

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

  1. 街道地址:这是您的门牌号码和街道名称。想想“123 main street”。它是任何地址的基础,可以准确地告诉别人您所在街道的位置。

    立即学习“Java免费学习笔记(深入)”;

  2. 城市/城镇:接下来是城市或城镇名称,即您的地址所在的社区。它有助于将搜索范围从全球或国家范围缩小到更本地化的范围。

  3. 州/省/地区:根据国家/地区的不同,这可能是州、省或地区。在美国,您将包括州(例如伊利诺伊州的 i.l.);在英国,您可能会使用县名。

  4. 邮政编码:这个方便的小系列数字(有时是字母)对于邮政服务快速识别地址的大致区域至关重要。它就像一个密码,可以加快交付过程。

  5. 国家:最后但同样重要的一点是,国家/地区名称告诉您该地址属于世界的哪个部分。它对于国际邮件至关重要,可确保您的信件不会到达地球的另一端。

地区差异

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

例如:

123 main streetspringfield, il 62704usa

这些地区差异只是冰山一角。一些国家/地区包括行政区域,而其他国家/地区可能完全跳过特定组成部分。您的代码需要足够智能才能适应这些格式,确保每个地址都能正确显示,无论它来自哪里。

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 streetspringfield, il 62704usa

当您拥有所有组件时,此方法非常有效,但如果需要添加一些组件怎么办?您可能想为此添加更多逻辑。

处理可选组件

有时,地址没有填写所有字段 - 也许您没有州或邮政编码。您可以使用条件检查来处理这些情况:

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 streetlondon nw1 6xeuk

使用格式化功能

您可能希望将逻辑封装在可重用的函数中,以应对更复杂的场景。以下是根据提供的组件格式化地址的函数示例:

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));

此函数检查每个组件并添加它(如果存在)。它还会修剪任何多余的空白,确保您的地址看起来干净整洁。当您运行此代码时,您将看到:

1600 pennsylvania avenue nwwashington, dc 20500usa

用于地址格式化的 javascript 库

在格式化地址时,尤其是对于国际申请,处理各种地址格式的细微差别可能会变得有点杂耍。值得庆幸的是,一些出色的 javascript 库使这项任务变得更加容易。让我们来看看其中一些最好的。

1.@fragaria/地址格式化程序

@fragaria/address-formatter 库是用于格式化国际邮政地址的强大解决方案。它旨在处理来自 openstreetmap 的 nominatim api 等来源的数据,并且可以根据不同国家的习俗自动检测和格式化地址。

主要特点:

示例:

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);

这将根据美国标准格式化地址,无缝处理任何变化。

2. 国际邮政地址

i18n-postal-address 库是国际地址格式化的另一个绝佳选择。它允许特定于区域的格式并支持各种属性,例如敬语、公司名称和多个地址行。

主要特点:

示例:

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());

这个库非常灵活,非常适合需要处理各种地址格式的应用程序。

3. 本地化地址格式

如果您正在寻找轻量级且零依赖的东西,本地化地址格式可能是您的首选。它基于 google 的 libaddressinput,并为各种语言环境提供简单而有效的地址格式。

主要特点:

示例:

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);

如果您需要开箱即用且无需大惊小怪的东西,那么这个库是完美的。

地址验证

格式化地址是一回事,但是验证它们又如何呢?确保地址正确且完整是任何处理实际邮件或投递的应用程序中的关键步骤。幸运的是,有多种工具和服务可以帮助您有效地验证地址。

1. 谷歌地图地理编码api

google maps geocoding api 是一个功能强大的工具,可以帮助您验证和地理编码地址。您可以通过向 api 发送带有地址的请求来获取有关位置的详细信息,包括纬度和经度坐标。这对于验证地址并确保其准确非常有用。

示例:

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);    });

此代码向 google maps geocoding api 发送带有地址的请求,并检索格式化的地址、纬度和经度坐标。

2. 使用 validator.js 进行综合验证

如果您需要更全面的地址验证,可以使用像 validator.js 这样的库。它提供了广泛的验证功能,包括电子邮件地址、url,当然还有地址的验证功能。您可以使用 ispostalcode 函数来验证邮政编码并确保它们与预期格式匹配。这是一个例子:

const validator = require('validator');const postalcode = '94043';if (validator.ispostalcode(postalcode, 'us')) {    console.log('valid postal code');} else {    console.log('invalid postal code');}

此代码使用 ispostalcode 函数验证美国邮政编码。您可以指定国家/地区代码以确保邮政编码与该国家/地区的预期格式匹配。

3. 地址验证服务

您可以求助于专门的地址验证服务,例如 smartystreets、loqate 或 melissa data,以满足更高级的地址验证需求。这些服务提供实时地址验证、更正和地理编码功能,确保您的地址准确且可交付。虽然这些服务通常需要付费,但对于依赖准确地址数据的应用程序来说,它们的价值是无价的。

示例:

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);    });

此代码使用 smartystreets api 来验证地址并返回有关该地址的详细信息,包括所做的任何更正。

概括

地址格式可能看起来很简单,但是在处理来自世界各地的地址时,事情很快就会变得复杂。通过了解地址的基本组成部分和区域变化,您可以构建更强大的应用程序来轻松处理地址。无论您使用简单的字符串操作还是功能强大的库,javascript 都提供了一系列工具来帮助您有效地设置地址格式。选择最适合您需求的方法,然后像专业人士一样开始格式化地址!