如何将JavaScript文件中的变量值注入到HTML文件中？

First off, let's fix a critical bug in your JavaScript code: you're using assignment operators (=) instead of comparison operators (===) in your if conditions. This means you're always setting check to dev or mas instead of verifying their values, so str will always be 'dev key' no matter what process.env.BRANCH_NAME actually is. Here's the corrected code:

var dev = 'development'; 
var mas = 'master'; 
var check = process.env.BRANCH_NAME; 
var check1 = process.env.JOB_NAME; 

if (check === dev) { 
  var str = 'dev key'; 
} else if (check === mas) { 
  var str = 'master key'; 
} else { 
  var str = 'live key'; 
}

Now, let's cover how to access str in your HTML, depending on your setup:

Scenario 1: Browser Environment (with a build tool) #

process.env is a Node.js-specific feature, so if you're running this code in the browser, you'll need a build tool like Webpack, Vite, or Parcel to replace those environment variables during your build process. For example, with Webpack's DefinePlugin, you can inject the actual values into your code before it's sent to the browser.

Once your JS code is properly processed, to use str in HTML:

• Load your external JavaScript file before the script where you want to use str. This ensures the variable is defined before you try to access it.
• Since var at the top level creates a global variable (attached to the window object in browsers), you can directly reference str in your HTML script.

Here's how your HTML should look:

<!-- Load your external JS file first -->
<script src="./path/to/your/script.js"></script>

<!-- Now use the str variable -->
<script>
  // Log the value to confirm it works
  console.log('Current key:', str);
  
  // Inject it into the DOM if needed
  document.getElementById('key-display').textContent = str;
</script>

<!-- Example element to display the key -->
<p>Current API Key: <span id="key-display"></span></p>

If you want to avoid polluting the global scope (a better practice), explicitly attach str to the window object in your JS file:

// ... your corrected code ...
window.str = str; // Expose to global scope

Scenario 2: Server-Side Rendering (Node.js) #

If you're using Node.js to render HTML (e.g., with Express and a template engine like EJS or Pug), you can pass the str variable directly to your template and inject it into the HTML.

For example, with EJS:

1. In your Node.js route, compute str as usual:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const dev = 'development'; 
  const mas = 'master'; 
  const check = process.env.BRANCH_NAME; 
  let str;

  if (check === dev) { 
    str = 'dev key'; 
  } else if (check === mas) { 
    str = 'master key'; 
  } else { 
    str = 'live key'; 
  }

  res.render('index', { str }); // Pass str to the template
});

2. In your EJS template (index.ejs), inject the variable directly:

<script>
  const str = '<%= str %>';
  console.log('Current key:', str);
</script>

<p>Current API Key: <%= str %></p>

Important Note #

If you're trying to run the JS code directly in the browser without a build tool, process.env will be undefined. You'll need to replace those variables with hardcoded values or use a build tool to inject them as mentioned earlier.

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