在 React 中从 Cookies 获取 phone 数字前缀

Question

我知道我们可以用这个方法获取一个国家的iso代码：

import Cookies from 'js-cookie';
const iso = Cookies.get('CK_ISO_CODE');
console.log(iso); // -> 'us'

有没有办法获得 phone 前缀？

例如，美国应该是+1，法国应该是+33等等。

Answer 1

您需要使用这个 npm 包：https://www.npmjs.com/package/world-countries

首先，这是一个在片段中运行的示例。我们必须获取 JSON 文件，以便 eventListener 是异步的，但如果您使用 npm 包（下一个示例），它就不必是异步的。

document.querySelector("#load-prefix").addEventListener("click", async () => {
  const world = await fetch(`https://cdn.jsdelivr.net/npm/world-countries@4.0.0/countries.json`).then(res => res.json())
  const iso = document.querySelector("#iso").value;
  const country = world.find(({cca2}) => cca2.toLowerCase() === iso.toLowerCase());
  const phonePrefixStart = country ? country.idd.root : "unknown";
  const phonePrefixEnd = country ? (country.idd.suffixes.length === 1 ? country.idd.suffixes[0] : "") : "";
  const phonePrefix = phonePrefixStart + phonePrefixEnd;
  document.querySelector("#output").innerText = phonePrefix;
});

<input placeholder="iso code" id="iso" />
<button id="load-prefix">Get Phone Prefix</button>
<p id="output"></p>

有了 npm 包，它看起来像这样。（此示例不起作用，因为 Stack Snippets 不包含模块打包器）

const world = require('world-countries')
// or
import world from "world-countries";

document.querySelector("#load-prefix").addEventListener("click", () => {
  const iso = document.querySelector("#iso").value;
  const country = world.find(({cca2}) => cca2.toLowerCase() === iso.toLowerCase());
  const phonePrefixStart = country ? country.idd.root : "unknown";
  const phonePrefixEnd = country ? (country.idd.suffixes.length === 1 ? country.idd.suffixes[0] : "") : "";
  const phonePrefix = phonePrefixStart + phonePrefixEnd;
  document.querySelector("#output").innerText = phonePrefix;
});

<input placeholder="iso code" id="iso" />
<button id="load-prefix">Get Phone Prefix</button>
<p id="output"></p>

回到你的问题，它看起来像这样：

import Cookies from 'js-cookie';
import world from "world-countries";
const iso = Cookies.get('CK_ISO_CODE');
console.log(iso); // -> 'us'
const country = world.find(({cca2}) => cca2.toLowerCase() === iso.toLowerCase());
const phonePrefixStart = country ? country.idd.root : "unknown";
const phonePrefixEnd = country ? (country.idd.suffixes.length === 1 ? country.idd.suffixes[0] : "") : "";
const phonePrefix = phonePrefixStart + phonePrefixEnd;
console.log(phonePrefix); // -> '+1'

在 React 中从 Cookies 获取 phone 数字前缀

Get phone number prefix from Cookies in React

javascript

cookies

iso

reactjs

js-cookie