如何从事件监听器传递字符串而非数组至全局变量，解决组件配置问题

当前需求是在页面load事件中读取名为user_lang的Cookie值，以字符串形式存入全局变量，最终用于组件的language配置。

现有两种尝试代码：

1. 初始代码（数组形式可用，但不符合字符串需求）：

const user_sel_lang = [];
window.addEventListener('load', function () {
    var user_lang_c = Cookies.get('user_lang');
    user_sel_lang.push(user_lang_c);
}, false);

window.adaSettings = {
    language: user_sel_lang,
    align: "left"
}

此时language为数组格式（如['de']，但需要字符串格式）。

2. 尝试转字符串后出现undefined的代码：

const user_sel_lang = [];
let user_sel_lang_string = user_sel_lang.toString();

window.addEventListener('load', function () {
    var user_lang_c = Cookies.get('user_lang');
    user_sel_lang.push(user_lang_c);
}, false);

window.settings = {
    language: user_sel_lang_string,
    align:"left"
}

错误原因 #

user_sel_lang_string在页面初始化时就被赋值为空数组的字符串形式（空字符串），而load事件是异步触发的——等事件执行时，window.settings已经完成初始化，且原始类型的字符串变量不会自动更新，最终导致language值不符合预期（若Cookie不存在则为undefined）。

正确实现方案 #

方案1：直接使用字符串全局变量，在load事件中赋值并更新配置 #

// 初始化字符串变量
let user_sel_lang_string = '';

window.addEventListener('load', function () {
    // 获取Cookie值，可设置默认语言兜底
    const user_lang_c = Cookies.get('user_lang') || 'en';
    // 赋值给全局字符串变量
    user_sel_lang_string = user_lang_c;
    // 更新组件配置
    window.adaSettings = {
        language: user_sel_lang_string,
        align: "left"
    };
}, false);

方案2：提前初始化配置对象，在load事件中修改language属性 #

如果组件要求window.adaSettings必须提前存在，可先初始化默认值，再在事件中更新：

// 提前初始化配置，设置默认语言
window.adaSettings = {
    language: 'en',
    align: "left"
};

window.addEventListener('load', function () {
    const user_lang_c = Cookies.get('user_lang');
    // 直接修改配置对象的language属性
    if (user_lang_c) {
        window.adaSettings.language = user_lang_c;
    }
}, false);

方案3：无需额外全局变量，直接在load事件中完成配置 #

如果不需要单独的全局变量存储语言值，可简化代码：

window.addEventListener('load', function () {
    const user_lang_c = Cookies.get('user_lang') || 'en';
    window.adaSettings = {
        language: user_lang_c,
        align: "left"
    };
}, false);

以上方案均能确保language以字符串形式（如'de'）正确传入组件配置，同时避免异步执行导致的赋值时机问题。

内容的提问来源于stack exchange，提问作者Dirty Bird Design