使用intl-tel-input获取HTML国际手机号提示函数未定义如何解决

1. 页面展示变量名而非实际手机号的修复 #

• 问题原因：JavaScript 中仅*反引号()包裹的模板字符串*支持${变量名}插值语法，你当前使用单引号包裹字符串，会将${phoneNumber}`作为普通文本直接输出。
• 修复代码：将info.innerHTML行的单引号替换为反引号即可：

function process(event) {
  event.preventDefault();
  const phoneNumber = phoneInput.getNumber();
  info.style.display = "";
  // 把原来的单引号改成反引号
  info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
  // 若需要后续提交表单到后端，可在此处手动触发提交
  // document.getElementById('login').submit();
}

2. IDE提示getNumber()函数未解析的修复 #

• 问题原因：该提示是IDE静态类型检测导致的，不属于代码运行错误。IDE默认没有内置intl-tel-input库的类型声明，因此识别不到实例上的getNumber()方法，代码在浏览器中运行时只要库加载正常就可以正常调用该方法。
• 可选修复（消除IDE警告）：在初始化phoneInput前添加类型注释即可：

const phoneInputField = document.querySelector("#tel");
// 新增下面这行类型注释
/** @type {import('intl-tel-input').IntlTelInput} */
const phoneInput = window.intlTelInput(phoneInputField, {
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});

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