📌  相关文章
📜  如何使用 JavaScript 切换页面的语言？(1)

📅  最后修改于: 2023-12-03 15:38:02.128000             🧑  作者: Mango

如何使用 JavaScript 切换页面的语言

在许多网站上，我们经常看到具有多种语言版本的网站。这是为了使用户可以使用他们更舒适的语言浏览网站。这些语言版本通常可以通过点击页面上的小图标或链接来切换。

在本篇文章中，我们将介绍如何使用 JavaScript 切换页面的语言。我们将使用一个简单的 HTML 页面和一个 JavaScript 脚本来演示如何实现多语言版本。

首先创建 HTML 页面

我们将先创建一个简单的 HTML 页面作为示例。以下是示例页面的代码：

<!DOCTYPE html>
<html>
<head>
	<title>多语言网站示例</title>
</head>
<body>
	<header>
		<h1>多语言网站示例</h1>
	</header>
	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</nav>
	<main>
		<h2>欢迎来到多语言网站示例</h2>
		<p>这是一个简单的多语言网站示例。</p>
		<p>点击下面的按钮来切换语言:</p>
		<button id="en">英语</button>
		<button id="zh">中文</button>
	</main>
	<footer>
		<p>&copy; 2020 多语言网站示例</p>
	</footer>
</body>
</html>

这是一个简单的多语言网站示例，包含一个页面标题、导航栏、主要内容、两个语言切换按钮和页脚。这个例子是一个单页面应用程序，使用 JavaScript 来实现语言切换。

使用 JavaScript 切换语言

现在让我们来看看如何使用 JavaScript 切换语言。我们将使用 JavaScript 将网站的语言从英语切换到中文。

首先，在 HTML 文件的头部中，添加以下两个语言版本的 JavaScript 文件。这些文件包含网站的文本字符串和其他用于创建语言版本的代码。

<script src="en.js"></script>
<script src="zh.js"></script>

接下来，在 HTML 文件的尾部，添加以下 JavaScript 代码：

<script>
	var lang = 'en';
	var strings = en;

	function setLanguage(newLang) {
		if (newLang === 'en') {
			lang = 'en';
			strings = en;
		}
		else if (newLang === 'zh') {
			lang = 'zh';
			strings = zh;
		}

		translate();
	}

	function translate() {
		document.querySelector('h2').innerHTML = strings.WELCOME;
		document.querySelectorAll('nav a')[0].innerHTML = strings.HOME;
		document.querySelectorAll('nav a')[1].innerHTML = strings.ABOUT;
		document.querySelectorAll('nav a')[2].innerHTML = strings.CONTACT;
		document.querySelector('p:nth-of-type(1)').innerHTML = strings.CLICK_TO_CHANGE;
		document.getElementById('en').innerHTML = strings.ENGLISH;
		document.getElementById('zh').innerHTML = strings.CHINESE;
	}

	translate();
</script>

这个 JavaScript 代码定义了两个全局变量：lang 和 strings。lang 变量存储当前网站所使用的语言，strings 变量存储当前语言的文本字符串。

我们还定义了 setLanguage 和 translate 函数。setLanguage 函数用于更改网站的语言。translate 函数用于使页面中的所有文本字符串从当前语言切换到新语言。

最后，我们调用 translate 函数，使初始文本字符串显示在页面上。

现在，我们需要编写 en.js 和 zh.js 文件，以存储对应语言的字符串。我们将在两个语言的 JavaScript 文件中定义同一组字符串。这些字符串包括：

var en = {
	WELCOME: 'Welcome to the multilingual website example',
	HOME: 'Home',
	ABOUT: 'About Us',
	CONTACT: 'Contact Us',
	CLICK_TO_CHANGE: 'Click below to change language:',
	ENGLISH: 'English',
	CHINESE: 'Chinese'
};

var zh = {
	WELCOME: '欢迎来到多语言网站示例',
	HOME: '首页',
	ABOUT: '关于我们',
	CONTACT: '联系我们',
	CLICK_TO_CHANGE: '点击下面的按钮来切换语言:',
	ENGLISH: '英语',
	CHINESE: '中文'
};

en.js 文件和 zh.js 文件将分别为英语和中文提供相同的字符串。

修改 HTML 源代码来反映语言的更改

现在我们已经编写了 JavaScript 和字符串文件。接下来，我们需要修改 HTML 代码来显示与所选语言相对应的字符串。

在 HTML 代码中，我们使用以下语法来表示当前网站所使用的语言：

lang="{{lang}}"

使用“大括号”表示法，将 lang="en" 或 lang="zh" 替换为 JavaScript 中定义的变量值。

在以下元素标记中使用语言：

<h2 lang="{{lang}}">{{strings.WELCOME}}</h2>
<nav>
	<ul>
		<li><a href="#" lang="{{lang}}">{{strings.HOME}}</a></li>
		<li><a href="#" lang="{{lang}}">{{strings.ABOUT}}</a></li>
		<li><a href="#" lang="{{lang}}">{{strings.CONTACT}}</a></li>
	</ul>
</nav>
<p lang="{{lang}}">{{strings.CLICK_TO_CHANGE}}</p>
<button id="en">{{strings.ENGLISH}}</button>
<button id="zh">{{strings.CHINESE}}</button>

我们使用“大括号”语法来将变量和文本字符串插入 HTML 元素中。这些元素的 lang 属性将使用当前语言（en 或 zh），使浏览器可以使用正确的字体流设置文本。

结论

现在您已经了解如何使用 JavaScript 切换页面的语言。我们创建了一个简单的多语言网站示例，并使用 JavaScript、字符串文件和 HTML 修改，展示了如何在一个网站上支持多种语言。这些技术可以应用于任何网站，使用户可以在他们最喜欢的语言中享受浏览。