在通过以下方式将内联JavaScript添加到WordPress页面的页脚时，我遇到了一个编码问题wp_add_inline_script().

以下描述是用于演示的问题的简化版本。

因此，我在post editor的metabox中有一个textarea，其中包含以下JavaScript：

var test3 = \'3\';
var test4 = "4";

注意使用单引号和双引号进行测试。我还在将包含以下内容的JavaScript文件排入队列：

console.log("test.js loaded");

textarea中的JavaScript直接添加到页面test.js 通过wp\\u add\\u inline\\u script（）。

问题是，当我检查源代码时，单引号/双引号已经编码：

var test3 = '3';
var test4 = "4";

我不明白为什么会这样，所以我做了一个类似的测试，但将JavaScript存储在插件设置页面的文本区域中。

此处，文本区域包含：

var test1 = \'1\';
var test2 = "2";

当添加到前端页面时，这个JavaScript输出非常完美。以下是屏幕截图：

似乎来自post meta的数据是经过编码的，而来自插件选项的数据不是。

以下是完整的插件代码：

文件：inline-js-test.js

<?php
/*
Plugin Name: Inline JS Test
Version: 0.1
Author: David Gwyer
*/

// ijst_ prefix is derived from [i]nline [js] [t]est

// Enqueue scripts

function ijst_enqueue_scripts() {
    $options = get_option( \'ijst_options\' );
    $js = get_post_meta( \'5943\', \'_ijst-js\', true );

    wp_enqueue_script( \'ijst-test\', plugins_url(\'test.js\', __FILE__), array(), \'\', true );

    $inline_js1 = $options[\'textarea\'];
    $inline_js2 = $js;
    wp_add_inline_script( \'ijst-test\', $inline_js1 );
    wp_add_inline_script( \'ijst-test\', $inline_js2 );
}
add_action( \'wp_enqueue_scripts\', \'ijst_enqueue_scripts\' );

// Plugin options page

function ijst_init() {
    register_setting( \'ijst_plugin_options\', \'ijst_options\' );
}
add_action( \'admin_init\', \'ijst_init\' );

function ijst_add_options_page() {
    $page = add_options_page( \'Inline JS Test\', \'Inline JS Test\', \'manage_options\', __FILE__, \'ijst_render_form\' );
}
add_action( \'admin_menu\', \'ijst_add_options_page\' );

function ijst_render_form() {
    ?>
    <div class="wrap">
        <h2 style="font-size: 23px;">Inline JS Test</h2>
        <form method="post" action="options.php">
            <?php
                settings_fields( \'ijst_plugin_options\' );
                $options = get_option( \'ijst_options\' );
            ?>
            <table>
                <tr>
                    <td><textarea name="ijst_options[textarea]" rows="7" cols="50" type=\'textarea\'><?php echo $options[\'textarea\']; ?></textarea></td>
                </tr>
            </table>
            <p class="submit"><input type="submit" class="button-primary" value="<?php _e( \'Save Changes\' ) ?>"></p>
        </form>
    </div>
<?php
}

// Post meta box

function ijst_meta_box_init() {
    add_meta_box( \'inline-js-test\', \'Inline JS Test\', \'ijst_render_meta_box\', \'post\', \'normal\', \'high\' );
    add_action( \'save_post\', \'ijst_save_meta_box_data\' );
}
add_action( \'admin_init\', \'ijst_meta_box_init\' );

function ijst_save_meta_box_data( $post_id ) {
    if ( isset( $_POST[\'ijst-js\'] ) ) { update_post_meta( $post_id, \'_ijst-js\', esc_attr( $_POST[\'ijst-js\'] ) ); }
}

function ijst_render_meta_box( $post, $args ) {
    $js = get_post_meta( $post->ID, \'_ijst-js\', true );
    ?><table><tr><td><textarea id="ijst-js" name="ijst-js"><?php echo esc_attr( $js ); ?></textarea></td></tr></table><?php
}

文件：test.js

console.log("test.js loaded");

整个插件的代码也可以在以下要点中找到：https://gist.github.com/dgwyer/0bb2022be0d733cf3bfc4e094ea815f7

除了主要问题之外，我还需要了解在将JavaScript添加到网页之前转义/清理JavaScript的正确过程？

我认为输出原始数据不是一个好主意，但显然不想使用任何会破坏代码的东西。