HTML Navigator language प्रॉपर्टी: ब्राउज़र भाषा सेटिंग प्राप्त करें

HTML Navigator language प्रॉपर्टी उपयोगकर्ता के ब्राउज़र की पसंदीदा भाषा को दर्शाने वाला एक स्ट्रिंग लौटाती है (जैसे "hi-IN", "en-US", "fr-FR")। यह BCP 47 भाषा टैग प्रारूप का पालन करती है और अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक है।

सिंटैक्स (Syntax)

navigator.language

उदाहरण (Example)

यह उदाहरण ब्राउज़र की भाषा सेटिंग प्रदर्शित करता है और संबंधित जानकारी दिखाता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover {
      background: #b01030;
    }
    .show {
      font-size: 1.5rem;
      color: #fff;
      margin-top: 1rem;
      background: rgba(0,0,0,0.3);
      padding: 1.5rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 300px;
    }
    .language-tag {
      font-size: 2rem;
      font-weight: bold;
      color: #ffeb3b;
      font-family: monospace;
      background: rgba(0,0,0,0.5);
      padding: 0.5rem 1rem;
      border-radius: 8px;
    }
    .lang-list {
      text-align: left;
      max-width: 500px;
      margin: 2rem auto;
      background: rgba(255,255,255,0.1);
      padding: 1.5rem;
      border-radius: 10px;
    }
    .lang-list ul { text-align: left; }
  </style>
</head>
<body>
  <h1>HTML Navigator language प्रॉपर्टी डेमो</h1>
  <button class="btn" onclick="showLanguage()">ब्राउज़र भाषा दिखाएं</button>
  <div class="show" id="languageDisplay"></div>

  <div class="lang-list">
    <h3>सामान्य भाषा कोड उदाहरण:</h3>
    <ul>
      <li><code>hi-IN</code> - हिंदी (भारत)</li>
      <li><code>en-US</code> - अंग्रेजी (संयुक्त राज्य)</li>
      <li><code>en-GB</code> - अंग्रेजी (यूनाइटेड किंगडम)</li>
      <li><code>fr-FR</code> - फ्रेंच (फ्रांस)</li>
      <li><code>es-ES</code> - स्पेनिश (स्पेन)</li>
      <li><code>zh-CN</code> - चीनी (सरलीकृत, चीन)</li>
      <li><code>ja-JP</code> - जापानी (जापान)</li>
      <li><code>ar-SA</code> - अरबी (सऊदी अरब)</li>
    </ul>
    <p><strong>प्रारूप: language-REGION (BCP 47 मानक)</p>
  </div>

  <script>
    function showLanguage() {
      const language = navigator.language;
      const languages = navigator.languages || [language];
      
      document.getElementById('languageDisplay').innerHTML = `
        <p>प्राथमिक भाषा: <span class="language-tag">${language}</span></p>
        <p>भाषा प्राथमिकता सूची: <span class="language-tag">${languages.join(', ')}</span></p>
      `;
    }
  </script>
</body>
</html>

आउटपुट (Output)

"ब्राउज़र भाषा दिखाएं" बटन पर क्लिक करने पर प्राथमिक भाषा और भाषा प्राथमिकता सूची दिखाई जाएगी।

परिणाम उदाहरण:

विस्तृत विश्लेषण

navigator.language vs navigator.languages

• navigator.language: एकल स्ट्रिंग लौटाता है (उपयोगकर्ता की पहली पसंद)।
• navigator.languages: सरणी लौटाता है जिसमें उपयोगकर्ता की सभी पसंदीदा भाषाएं प्राथमिकता क्रम में होती हैं।

BCP 47 भाषा टैग संरचना

language[-script][-region][-variant][-extension]
उदाहरण: zh-Hans-CN (चीनी, सरलीकृत लिपि, चीन)

व्यावहारिक उपयोग

1. सामग्री स्थानीयकरण: उपयोगकर्ता की भाषा के अनुसार UI अनुवाद दिखाएं।
2. दिनांक/संख्या प्रारूपण: Intl.DateTimeFormat और Intl.NumberFormat के साथ उपयोग करें।
3. फॉलबैक तर्क: navigator.languages का उपयोग करके फॉलबैक श्रृंखला लागू करें।

कोड उदाहरण: भाषा-आधारित सामग्री

function getLocalizedGreeting() {
  const lang = navigator.language.split('-')[0]; // भाषा कोड निकालें
  const greetings = {
    'hi': 'नमस्ते!',
    'en': 'Hello!',
    'es': '¡Hola!',
    'fr': 'Bonjour!',
    'de': 'Hallo!',
    'ja': 'こんにちは！',
    'zh': '你好！'
  };
  return greetings[lang] || greetings['en'];
}

ब्राउज़र समर्थन

• navigator.language: सभी आधुनिक ब्राउज़र (IE 11+)
• navigator.languages: Chrome 32+, Firefox 32+, Safari 10.1+, Edge 79+

गोपनीयता नोट

भाषा जानकारी फिंगरप्रिंटिंग में योगदान दे सकती है। कुछ गोपनीयता-केंद्रित ब्राउज़र इसे सामान्य बना सकते हैं (जैसे हमेशा "en-US" लौटाना)।