谷歌翻译API是否提供获取全语言及对应代码的端点？

问题背景 #

我在React应用的主组件中编写了如下componentDidMount函数，手动维护了语言名称和对应代码的数组来生成下拉选项：

componentDidMount(){
        const land = ["Afrikaans", "Albanian", "Amharic", "Arabic", "Armenian", "Assamese", "Aymara", "Azerbaijani", "Bambara", "Basque", "Belarusian", "Bengali", "Bhojpuri", "Bosnian",
        "Bulgarian", "Catalan", "Cebuano", "Chinese (Simplified)", "Chinese (Traditional)", "Corsican", "Croatian", "Czech", "Danish", "Dhivehi", "Dogri", "Dutch", "English", "Esperanto",
        "Estonian", "Ewe", "Filipino (Tagalog)", "Finnish", "French", "Frisian", "Galician", "Georgian", "German", "Greek", "Guarani", "Gujarati", "Haitian Creole", "Hausa", "Hawaiian",
        "Hebrew", "Hindi", "Hmong", "Hungarian", "Icelandic", "Igbo", "Ilocano", "Indonesian", "Irish", "Italian", "Japanese", "Javanese", "Kannada", "Kazakh", "Khmer", "Kinyarwanda",            
        "Konkani", "Korean", "Krio", "Kurdish", "Kurdish (Sorani)", "Kyrgyz", "Lao", "Latin", "Latvian", "Lingala", "Lithuanian", "Luganda", "Luxembourgish", "Macedonian", "Maithili", "Malagasy",
        "Malay", "Malayalam", "Maltese", "Maori", "Marathi", "Meiteilon (Manipuri)", "Mizo", "Mongolian", "Myanmar (Burmese)", "Nepali", "Norwegian", "Nyanja (Chichewa)", "Odia (Oriya)", 
        "Oromo", "Pashto", "Persian", "Polish", "Portuguese (Portugal, Brazil)", "Punjabi", "Quechua", "Romanian", "Russian", "Samoan", "Sanskrit", "Scots Gaelic", "Sepedi", "Serbian",
        "Sesotho", "Shona", "Sindhi", "Sinhala (Sinhalese)", "Slovak", "Slovenian", "Somali", "Spanish", "Sundanese", "Swahili", "Swedish", "Tagalog (Filipino)", "Tajik", "Tamil", "Tatar",
        "Telugu", "Thai", "Tigrinya", "Tsonga", "Turkish", "Turkmen", "Twi (Akan)", "Ukrainian", "Urdu", "Uyghur", "Uzbek", "Vietnamese", "Welsh", "Xhosa", "Yiddish", "Yoruba", "Zulu"];

        const value = ["af", "sq", "am", "ar", "hy", "as", "ay", "az", "bm", "eu", "be", "bn", "bho", "bs", "bg", "ca", "ceb", "zh", "zh-TW (BCP-47)", "co", "hr", "cs", "da", "dv", "doi", "nl",
        "en", "eo", "et", "ee", "fil", "fi", "fr", "fy", "gl", "ka", "de", "el", "gn", "gu", "ht", "ha", "haw", "he", "hi", "hmn", "hu", "is", "ig", "ilo", "id", "ga", "it", "ja", "jv", "kn",
        "kk", "km", "rw", "gom", "ko", "kri", "ku", "ckb", "ky", "lo", "la", "lv", "ln", "lt", "lg", "lb", "mk", "mai", "mg", "ms", "ml", "mt", "mi", "mr", "mni-Mtei", "lus", "mn", "my", "ne",
        "no", "ny", "or", "om", "ps", "fa", "pl", "pt", "pa", "qu", "ro", "ru", "sm", "sa", "gd", "nso", "sr", "st", "sn", "sd", "si", "sk", "sl", "so", "es", "su", "sw", "sv", "tl", "tg", "ta",
        "tt", "te", "th", "ti", "ts", "tr", "tk", "ak", "uk", "ur", "ug", "uz", "vi", "cy", "xh", "yi", "yo", "zu"]; 
        
        let selectRef1 = document.querySelector("#from");
        let selectRef2 = document.querySelector("#to");

        for(let i = 0; i < land.length; i++){
            let optionRef = document.createElement("option");
            let optionRef2 = document.createElement("option");
            optionRef.text = land[i];
            optionRef.setAttribute("value", value[i]);
            optionRef2.text = land[i];
            optionRef2.setAttribute("value", value[i]);
            selectRef1.add(optionRef);
            selectRef2.add(optionRef2);
        }
    }

现想了解谷歌翻译API是否提供可获取全部支持语言及对应代码的端点，无需手动维护上述两个数组。

解决方案 #

谷歌翻译API确实提供了获取所有支持语言列表的端点，无需手动维护数组。

端点说明 #

• 请求方法：GET
• 端点地址：https://translation.googleapis.com/language/translate/v2/languages
• 必填参数：
  • key：你的谷歌云API密钥（需先启用翻译API并创建密钥）
• 可选参数：
  • target：指定返回的语言名称使用的目标语言，比如zh-CN会返回中文的语言名称，默认是英文

示例请求（React中使用fetch） #

修改你的componentDidMount函数，通过API获取语言列表并生成选项：

componentDidMount() {
  const API_KEY = '你的谷歌云API密钥';
  const targetLang = 'zh-CN'; // 可选，指定返回语言名称的语言

  fetch(`https://translation.googleapis.com/language/translate/v2/languages?key=${API_KEY}&target=${targetLang}`)
    .then(res => res.json())
    .then(data => {
      const languages = data.data.languages;
      // 获取两个下拉框DOM元素
      const selectRef1 = document.querySelector("#from");
      const selectRef2 = document.querySelector("#to");
      
      // 清空原有选项（如果需要）
      selectRef1.innerHTML = '';
      selectRef2.innerHTML = '';

      // 遍历生成选项
      languages.forEach(lang => {
        const option1 = document.createElement('option');
        option1.text = lang.name;
        option1.value = lang.language;
        selectRef1.add(option1);

        const option2 = document.createElement('option');
        option2.text = lang.name;
        option2.value = lang.language;
        selectRef2.add(option2);
      });
    })
    .catch(err => console.error('获取语言列表失败:', err));
}

更符合React规范的写法 #

建议使用React状态管理来渲染选项，避免直接操作DOM：

class YourComponent extends React.Component {
  state = {
    languages: []
  };

  componentDidMount() {
    const API_KEY = '你的谷歌云API密钥';
    const targetLang = 'zh-CN';

    fetch(`https://translation.googleapis.com/language/translate/v2/languages?key=${API_KEY}&target=${targetLang}`)
      .then(res => res.json())
      .then(data => {
        this.setState({ languages: data.data.languages });
      })
      .catch(err => console.error('获取语言列表失败:', err));
  }

  render() {
    const { languages } = this.state;
    return (
      <div>
        <select id="from">
          {languages.map(lang => (
            <option key={lang.language} value={lang.language}>
              {lang.name}
            </option>
          ))}
        </select>
        <select id="to">
          {languages.map(lang => (
            <option key={lang.language} value={lang.language}>
              {lang.name}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

返回数据结构示例 #

请求成功后，返回的JSON结构大致如下：

{
  "data": {
    "languages": [
      {
        "language": "af",
        "name": "南非语"
      },
      {
        "language": "sq",
        "name": "阿尔巴尼亚语"
      },
      // 其他语言...
    ]
  }
}

内容的提问来源于stack exchange，提问作者Daniel