当前位置：首页 > Rust > 正文

Rust与JavaScript的桥梁：js-sys详解（手把手教你用Rust操作JavaScript API）

在现代Web开发中，Rust 与 WebAssembly 的结合正变得越来越流行。而当你使用 Rust 编写 WebAssembly 模块时，往往需要与浏览器中的 JavaScript 环境进行交互。这时，js-sys 就派上了大用场！

本文将带你从零开始，了解什么是 js-sys，如何安装它，并通过实际例子演示如何使用它来调用 JavaScript 的原生 API。无论你是 Rust 新手还是刚接触 WebAssembly，都能轻松上手！

Rust与JavaScript的桥梁：js-sys详解（手把手教你用Rust操作JavaScript API） Rust js-sys JavaScript绑定 WebAssembly前端开发 第1张

什么是 js-sys？

js-sys 是一个由 Rust 官方团队维护的 crate（库），它为 JavaScript 的标准内置对象（如 Array、Date、Promise、console 等）提供了类型安全的 Rust 绑定。它建立在 wasm-bindgen 之上，让你能以 Rust 的方式安全地调用 JavaScript 功能。

简单来说：js-sys = Rust + JavaScript API 的安全接口。

准备工作

在开始之前，请确保你已安装以下工具：

  • Rust（通过 rustup 安装）
  • wasm-pack（用于构建和打包 WebAssembly 项目）
  • Node.js（用于本地测试）

如果你还没安装，可以运行以下命令：

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

创建一个新项目

打开终端，运行以下命令创建一个新的 Rust WASM 项目：

wasm-pack new rust-js-democd rust-js-demo

然后编辑 Cargo.toml 文件，在 [dependencies] 部分添加 js-sys 和 wasm-bindgen：

[dependencies]wasm-bindgen = "0.2"js-sys = "0.3"

使用 js-sys 调用 JavaScript API

现在，我们来写一段代码，使用 js-sys 向浏览器控制台输出信息。

打开 src/lib.rs，替换为以下内容：

use wasm_bindgen::prelude::*;use js_sys::console;#[wasm_bindgen]pub fn greet(name: &str) {    let msg = format!("Hello, {}! Welcome to Rust and JavaScript binding!", name);    console::log_1(&msg.into());}

这段代码做了什么？

  • 导入了 wasm_bindgen 和 js_sys::console；
  • 定义了一个名为 greet 的函数，并用 #[wasm_bindgen] 标记，使其可以从 JavaScript 调用；
  • 使用 console::log_1 向控制台打印一条消息。

构建并测试

在项目根目录运行：

wasm-pack build --target web

这会生成一个 pkg/ 目录。接着创建一个简单的 HTML 文件 index.html：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Rust + js-sys Demo</title></head><body>  <script type="module">    import init, { greet } from './pkg/rust_js_demo.js';    await init();    greet("Alice");  </script></body></html>

启动一个本地服务器（例如使用 Python）：

python3 -m http.server 8080

然后在浏览器中打开 http://localhost:8080，打开开发者工具，你会看到控制台输出：

Hello, Alice! Welcome to Rust and JavaScript binding!

更多 js-sys 实战示例

除了 console，你还可以操作数组、日期、甚至 Promise！例如：

use js_sys::{Array, Date};#[wasm_bindgen]pub fn get_current_time() -> String {    let now = Date::new_0();    now.to_string().into()}#[wasm_bindgen]pub fn double_array(input: &Array) -> Array {    let result = Array::new();    for i in 0..input.length() {        let val = input.get(i).as_f64().unwrap_or(0.0);        result.push(&(val * 2.0).into());    }    result}

总结

通过 js-sys，Rust 开发者可以安全、高效地与 JavaScript 生态系统交互。无论你是想在 WebAssembly 中调用浏览器 API，还是构建高性能前端模块，js-sys 都是你不可或缺的工具。

记住这几个核心 SEO 关键词： Rust、 js-sys、 JavaScript绑定、 WebAssembly前端开发。 它们将帮助你在技术社区中更精准地找到相关资源。

现在，就去尝试用 Rust 写点酷炫的 Web 功能吧！

服务器教程云服务器高防服务器
本文由主机测评网于2025-12-07发表在主机测评网_免费VPS_免费云服务器_免费独立服务器，如有疑问，请联系我们。
本文链接：https://www.vpshk.cn/2025124073.html

相关文章