如何在WebAssembly中通过JSExport将C#字符串数组传递给JavaScript？

在VS2022 WebAssembly Console模板中，直接通过[JSExport]返回C#数组类型（如string[]）无法被JavaScript直接识别，这是因为.NET WASM和JS之间的类型互操作需要显式处理复杂类型。以下是两种可行的解决方案：

方案一：通过JSON序列化传递（推荐，适用于大多数场景） #

将C#数组序列化为JSON字符串，在JavaScript端解析为原生数组：

修改后的C#代码 #

using System;
using System.Runtime.InteropServices.JavaScript;
using System.Text.Json; // 新增命名空间

public partial class MyClass
{
    // Working
    [JSExport]
    internal static string Greeting()
    {
        var text = $"Hello, World! Greetings from node version: {GetNodeVersion()}";
        return text;
    }
 
    // Working
    [JSImport("node.process.version", "main.mjs")]
    internal static partial string GetNodeVersion();

    // 修改后的GetArray方法
    [JSExport]
    internal static string GetArray()
    {
        var array = new string[] { "1", "2" };
        return JsonSerializer.Serialize(array);
    }
}

对应的JavaScript代码 #

import { dotnet } from './dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig } = await dotnet
    .withDiagnosticTracing(false)
    .create();

setModuleImports('main.mjs', {
    node: {
        process: {
            version: () => globalThis.process.version
        }
    }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();

// 解析JSON字符串为JS原生数组
const jsonStr = exports.MyClass.GetArray();
const strArray = JSON.parse(jsonStr);
console.log(strArray); // 输出: ["1", "2"]

console.log(text);

await dotnet.run();

方案二：使用JSObject创建JavaScript可识别的数组 #

通过JSObject直接构建JS原生数组对象，让JavaScript可以直接操作：

修改后的C#代码 #

using System;
using System.Runtime.InteropServices.JavaScript;

public partial class MyClass
{
    // Working
    [JSExport]
    internal static string Greeting()
    {
        var text = $"Hello, World! Greetings from node version: {GetNodeVersion()}";
        return text;
    }
 
    // Working
    [JSImport("node.process.version", "main.mjs")]
    internal static partial string GetNodeVersion();

    // 修改后的GetArray方法
    [JSExport]
    internal static JSObject GetArray()
    {
        // 创建JS数组对象
        var jsArray = JSObject.CreateArray();
        // 为数组添加元素
        jsArray.SetProperty(0, "1");
        jsArray.SetProperty(1, "2");
        return jsArray;
    }
}

对应的JavaScript代码 #

import { dotnet } from './dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig } = await dotnet
    .withDiagnosticTracing(false)
    .create();

setModuleImports('main.mjs', {
    node: {
        process: {
            version: () => globalThis.process.version
        }
    }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();

// 获取JSObject并转换为原生数组
const jsArrayObj = exports.MyClass.GetArray();
const strArray = Array.from(jsArrayObj);
console.log(strArray); // 输出: ["1", "2"]

console.log(text);

await dotnet.run();

注意事项 #

• JSON序列化方案更简单，适合传递复杂数据结构，无需关注JS对象的内存管理。
• 使用JSObject时，若涉及大量对象操作，需注意手动释放资源（调用jsArray.Dispose()）以避免内存泄漏，简单场景下可忽略。

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