无法调用函数获取value参数并处理字符串，封装代码后val出现undefined

Hey there! Let's work through your two issues step by step—solving the val undefined problem first, then wrapping that repeated code into a clean, reusable function.

First: Why is val returning undefined? #

This almost always comes down to one of three simple missteps:

• Your function isn't returning the processed string (so it defaults to returning undefined automatically)
• You aren't passing val as a parameter to your function, or it's not accessible where the function runs
• The logic to fetch val (like from an API or another function) hasn't finished before you try to use it

Let's use a concrete example #

Let’s assume your original repeated code looks something like this:

// Original repeated code
let greeting1 = "Hello, {val}!";
let greeting2 = "Hi there, {val}!";

// Duplicate replacement logic (the code you want to encapsulate)
greeting1 = greeting1.replace("{val}", "Alice");
greeting2 = greeting2.replace("{val}", "Bob");

And your desired encapsulated code was something like this (with the undefined bug):

// Broken desired code (val is undefined)
function replaceName(str) {
  // Oops—no return statement, and val isn't defined here!
  str.replace("{val}", val);
}

let greeting1 = replaceName("Hello, {val}!"); // Returns undefined

The Fixed Solution #

Here's how to rewrite the function correctly to fix the undefined issue and clean up your repeated code:

Step 1: Build a reusable function #

Make the function accept both the original string and the value to replace {val} with, and return the processed result (this is the most critical fix!):

function replacePlaceholder(str, val) {
  // Add a default value for val in case it's missing
  const replacement = val || "Guest";
  // Return the modified string so the call gets a usable result
  return str.replace("{val}", replacement);
}

Step 2: Call the function with your values #

Now you can reuse this function everywhere instead of repeating the replace logic:

let greeting1 = replacePlaceholder("Hello, {val}!", "Alice");
let greeting2 = replacePlaceholder("Hi there, {val}!", "Bob");

console.log(greeting1); // Output: "Hello, Alice!"
console.log(greeting2); // Output: "Hi there, Bob!"

If val comes from an async source (like an API) #

If you're fetching val dynamically (e.g., from an API), make sure you wait for that fetch to complete before using the value:

// Example: Fetching val from an async source
async function getUserName() {
  // Simulate an API call delay
  await new Promise(resolve => setTimeout(resolve, 1000));
  return "Charlie";
}

// Use async/await to wait for the value before processing
async function generateGreetings() {
  const val = await getUserName();
  let greeting = replacePlaceholder("Welcome back, {val}!", val);
  console.log(greeting); // Output: "Welcome back, Charlie!"
}

generateGreetings();

Key Takeaways #

• Always return the result from your function—without a return statement, it will default to undefined
• Pass dynamic values as parameters don't hardcode them in the function, so it stays flexible for different use cases
• Handle missing values add a default for val to avoid unexpected undefined showing up in your strings

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