【问题标题】:Get phone number prefix from Cookies in React从 React 中的 Cookies 获取电话号码前缀
【发布时间】:2021-06-10 11:26:14
【问题描述】:

我知道我们可以用这个方法得到一个国家的iso代码:

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

有没有办法获取电话前缀?

例如,对于美国应该是 +1,对于 FR +33 等等。

【问题讨论】:

    标签: javascript reactjs cookies iso js-cookie


    【解决方案1】:

    你会想要使用这个 npm 包:https://www.npmjs.com/package/world-countries

    首先这是一个在 sn-p 中工作的示例。我们必须获取 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'
    

    【讨论】:

    • 它似乎以某种方式工作,但并不完全。例如,对于我测试过的所有国家,它只显示前缀的第一个数字。例如:法国(fr)有+33,但它只显示+3,罗马尼亚(ro)有+40,它只显示+4。以下是所有代码的列表:en.wikipedia.org/wiki/List_of_country_calling_codes
    • 我建议:const phonePrefix = country ? country.idd.root + country.idd.suffixes[0] : 'unknown';
    • @JeanPierre 那么在这种情况下需要创建一个数组,因为可以存在多个“后缀”。您宁愿拥有一组可能的代码还是只有一个代码?请注意,美国有 317 个“后缀”
    • 是的,在美国的情况下,只显示根是正确的,因为它是前缀。但是在罗马尼亚,没有+4,到处都是+40。所以我会说,如果前缀数组只包含一个元素,它应该被使用,否则不。
    • 好的,我会添加该功能
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-27
    • 1970-01-01
    • 1970-01-01
    • 2012-01-01
    • 2015-01-05
    • 1970-01-01
    相关资源
    最近更新 更多