如何通过数组动态调整TypeScript变量拼接顺序？

你的问题在于，section_sequence_array里存储的是属性名称的字符串（比如"section3"），而不是这些属性对应的实际值。直接把数组赋值给section_sequence，得到的是一个字符串数组，而不是你想要的拼接后的HTML字符串。

要实现动态调整拼接顺序，你需要通过属性名字符串来访问对应的实例属性值，然后把这些值拼接起来。这里可以用JavaScript/TypeScript的方括号属性访问语法，结合数组的map和join方法来实现：

方案1：使用getter动态计算推荐 #

这种方式会在每次访问section_sequence时自动根据当前的section_sequence_array生成拼接结果，非常灵活，后续修改数组顺序后结果会自动更新：

export class HomeComponent {
  // 假设这些基础变量已经提前初始化
  public myname = "张三";
  public phno = "1234567890";
  public email = "test@example.com";

  public section1 = `<ol><li>${this.myname}</li></ol>`;
  public section2 = `<ol><li>${this.phno}</li></ol>`;
  public section3 = `<ol><li>${this.email}</li></ol>`;
  
  // 随时修改这个数组的元素顺序，就能调整最终拼接结果
  public section_sequence_array = ["section3", "section2", "section1"];

  // 用getter动态生成拼接后的字符串
  public get section_sequence(): string {
    // 遍历顺序数组，通过属性名获取对应的值，再拼接成完整字符串
    return this.section_sequence_array.map(sectionName => this[sectionName]).join('');
  }
}

方案2：在构造函数中一次性初始化 #

如果你的拼接顺序不会动态变化，也可以在构造函数中一次性计算好结果：

export class HomeComponent {
  public myname: string;
  public phno: string;
  public email: string;

  public section1: string;
  public section2: string;
  public section3: string;
  public section_sequence_array: string[];
  public section_sequence: string;

  constructor() {
    // 先初始化基础变量
    this.myname = "张三";
    this.phno = "1234567890";
    this.email = "test@example.com";

    // 用模板字符串生成section内容，比+拼接更简洁易读
    this.section1 = `<ol><li>${this.myname}</li></ol>`;
    this.section2 = `<ol><li>${this.phno}</li></ol>`;
    this.section3 = `<ol><li>${this.email}</li></ol>`;

    // 定义想要的拼接顺序
    this.section_sequence_array = ["section2", "section3", "section1"];

    // 计算最终的拼接结果
    this.section_sequence = this.section_sequence_array.map(section => this[section]).join('');
  }
}

关键逻辑说明 #

• this[sectionName]：这是实现动态访问的核心——通过属性名字符串来访问实例的属性。比如当sectionName是"section3"时，this["section3"]就完全等同于this.section3。
• map方法：遍历顺序数组，把每个属性名字符串转换成对应的属性值。
• join('')：把转换后的所有字符串值拼接成一个完整的HTML字符串。

另外，建议用ES6的模板字符串（${变量}）代替传统的+拼接，代码更易读也更不容易出错。

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