Javascript中的文本对齐

在前端开发中，文本对齐是常见的需求。Javascript提供了多种方法来实现文本对齐，下面来具体介绍一些方法。

一、字符串填充

1. padStart()

padStart()方法可以在字符串的左边添加若干字符，以达到指定长度。

const str = "hello";
const padStr = str.padStart(10, "*");
console.log(padStr);    // "*****hello"

2. padEnd()

padEnd()方法可以在字符串的右边添加若干字符，以达到指定长度。

const str = "hello";
const padStr = str.padEnd(10, "*");
console.log(padStr);    // "hello*****"

二、表格排版

1. 使用空格

使用空格可以实现简单的表格排版，但是不够灵活，只适用于固定列宽的情况。

const str = "name   age   gender\nBill   30    male\nMary   25    female";
console.log(str);
/* 
name   age   gender
Bill   30    male
Mary   25    female
*/

2. 使用tab键

使用tab键可以实现更加灵活的表格排版，并且可以自适应列宽。

const str = "name\tage\tgender\nBill\t30\tmale\nMary\t25\tfemale";
console.log(str);
/* 
name    age     gender
Bill    30      male
Mary    25      female
*/

三、CSS样式

1. text-align属性

text-align属性可以设置文本在容器中的水平对齐方式。常用的值有left、center、right等。

<p style="text-align: center;">Hello World!</p>

2. display属性

display属性可以设置元素的排版方式。常用的值有block、inline-block、table-cell等。

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">Name</div>
    <div style="display: table-cell;">Age</div>
    <div style="display: table-cell;">Gender</div>
  </div>
  <div style="display: table-row;">
    <div style="display: table-cell;">Bill</div>
    <div style="display: table-cell;">30</div>
    <div style="display: table-cell;">Male</div>
  </div>
  <div style="display: table-row;">
    <div style="display: table-cell;">Mary</div>
    <div style="display: table-cell;">25</div>
    <div style="display: table-cell;">Female</div>
  </div>
</div>

以上是Javascript中实现文本对齐的一些方法，可以根据具体需求选择合适的方法来实现。