如何通过语言代码自动显示国旗

问题描述 投票:0回答:3

我有一个多语言reactjs应用程序,我希望在更改语言时有一个标志图标与语言代码相匹配,如何做到这一点而无需手动上传每个标志?

javascript reactjs multilingual
3个回答
1
投票

您可以尝试使用一些库,例如country-flag-icons

import * as Flags from 'country-flag-icons/react/3x2'

const Flag = Flags[value];
<Flag title={value} className="..."/>

0
投票

纯JS——无外部库

function countryCodeToFlag(countryCode) {
  // Validate the input to be exactly two characters long and all alphabetic
  if (!countryCode || countryCode.length !== 2 || !/^[a-zA-Z]+$/.test(countryCode)) {
    return '🏳️'; // White Flag Emoji for unknown or invalid country codes
  }

  // Convert the country code to uppercase to match the regional indicator symbols
  const code = countryCode.toUpperCase();
  
  // Calculate the offset for the regional indicator symbols
  const offset = 127397;
  
  // Convert each letter in the country code to its corresponding regional indicator symbol
  const flag = Array.from(code).map(letter => String.fromCodePoint(letter.charCodeAt(0) + offset)).join('');
  
  return flag;
}

// Example usage:
console.log(countryCodeToFlag('us')); // Outputs: 🇺🇸
console.log(countryCodeToFlag('de')); // Outputs: 🇩🇪
console.log(countryCodeToFlag('fr')); // Outputs: 🇫🇷

countryCodeToFlag 函数将两个字母的国家/地区代码(例如美国的“US”或德国的“DE”)转换为该国家/地区的表情符号标志。以下是其工作原理的简单步骤:

  1. 检查国家代码:首先,该函数检查给定的国家代码是否有效。它必须正好是两个字母长。如果代码无效,该函数将默认返回白旗表情符号 (🏳️)。
  2. 大写转换:国家/地区代码转换为大写,因为表情符号标志基于大写区域指示符号。例如,“in”变为“IN”。
  3. 将字母转换为表情符号:然后将国家/地区代码的每个字母转换为称为“区域指示符号”的特殊符号。这些符号本身通常不会被看到,但会被设备(如手机或计算机)用来显示旗帜表情符号。

在计算机编码系统 (Unicode) 中,每个字母都有一个与之关联的数字。例如,“A”是 65,“B”是 66,依此类推。 Unicode 中还有一个区域指示符号的起始点,即字母“A”的起始点是 127462。这就是函数中“偏移”值 127397 的来源 (127462 - 65 = 127397)。为了获取每个字母的区域指示符符号,该函数将此偏移量添加到该字母的 Unicode 编号中。因此,对于“U”(Unicode 中为 85),添加偏移量即可得到区域指示符“🇺”的 Unicode 编号,类似地,“S”可得到“🇸”。

组合符号:转换两个字母后,该函数将它们组合起来形成旗帜表情符号。对于“US”,它将“🇺”和“🇸”组合成“🇺🇸”。


0
投票

注意,除非浏览器是 Firefox,否则 Windows 仅将标志 unicode 字符显示为两个字母(请参阅文章),因此为了覆盖 Windows 和任何浏览器,请使用库。下面的示例使用 emoji.css。示例中注释了详细信息。

/**
 * This will change the class of a given element to that of a given
 * two letter country code. emoji.css must be loaded and the classList
 * of the element must include "em" and "em-flag-[country code]"
 * @param {string} selector - CSS selector of element
 * @param {string} country - Two letter country code
 */
function setFlag(selector, country) {
  // Reference the element
  const tag = document.querySelector(selector);
  /* If country is two letters return it in lower case, otherwise
   * return the last two letters of the browser default language.
   */
  const cty = /[A-Za-z]{2}/.test(country) ? country.toLowerCase() : navigator.language.slice(-2).toLowerCase();
  // Remove "em-flag-..." from classList.
  tag.className = tag.className.replace(/em-flag-\w{2}/g, "");
  // Add "em-flag-[cty]" to classList
  tag.classList.add(`em-flag-${cty}`);
}

// For demonstration purposes
document.querySelector("input").oninput = e => {
  setFlag(".em", e.target.value);
}
<!--| Flag Icons
This stylesheet provides the flag icons. 
For details, go to: 
https://afeld.github.io/emoji-css/
-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<label>Enter a two letter Country Code: 
  <input style="display:inline-block;width:2ch;text-align:center">
</label>
<i class="em"></i>

© www.soinside.com 2019 - 2024. All rights reserved.