【JavaScript】ブラウザの言語設定（ロケール）と言語名を取得する方法

const langage = navigator.language;

if( navigator.language === "ja" ) console.log( "日本語です" );
else console.log( "日本語ではありません：" +  navigator.language);

const ja =  new Intl.DisplayNames(["ja"], {type: "language"});
console.log( ja.of( "ja" ) ); // "日本語"
console.log( ja.of( "en" ) ); // "英語"
console.log( ja.of( "en-US" ) ); // "アメリカ英語"
console.log( ja.of( "zh-TW" ) ); // "中国語 (台湾)"

console.log( new Intl.DisplayNames(["en-US"], {type: "language"}).of( "ja" ) );
  // "Japanese"
console.log( new Intl.DisplayNames(["ko"], {type: "language"}).of( "ja" ) );
  // "일본어"
console.log( new Intl.DisplayNames(["fr"], {type: "language"}).of( "ja" ) );
 // "japonais"
console.log( new Intl.DisplayNames(["de"], {type: "language"}).of( "ja" ) );
 // "Japanisch"
console.log( new Intl.DisplayNames(["sv"], {type: "language"}).of( "ja" ) );
 // "japanska"

  // 日本語
const ja =  new Intl.DisplayNames(["ja"], {type: "region"});
console.log( ja.of( "jp" ) ); // "日本"
console.log( ja.of( "us" ) ); // "アメリカ合衆国"
  // アメリカ英語
const us =  new Intl.DisplayNames(["en-US"], {type: "region"});
console.log( us.of( "jp" ) ); // "Japan"
console.log( us.of( "us" ) ); // "United States"

document.addEventListener("DOMContentLoaded",()=>{
  const ja =  new Intl.DisplayNames(["ja"], {type: "language"});
  const us =  new Intl.DisplayNames(["en-US"], {type: "language"});

  document.body.innerHTML = "<table><tbody><tr><th>言語コード</th><th>言語名(日本語)</th><th>言語名(英語)</th></tr>"
    + navigator.languages.map((e=>`<tr><th>${e}</th><td>${ja.of(e)}</td><td>${us.of(e)}</td></tr>`)).join("\n")
    + "</table>";
});