Laravel 9、Inertia.js、Vue3下数字转英文文本实现方案咨询

后端（Laravel）实现 #

方案1：使用成熟PHP包 #

推荐用kwn/number-to-words包，支持多语言数字转文本，稳定且覆盖场景广。

1. 安装包：

composer require kwn/number-to-words

2. 封装辅助函数
   在app/Helpers.php中添加（若没有该文件，需创建并在composer.json的autoload字段注册）：

<?php

use NumberToWords\NumberToWords;

function numberToEnglish(int $number): string
{
    $numberToWords = new NumberToWords();
    $transformer = $numberToWords->getTransformer('en');
    return $transformer->toWords($number);
}

3. 通过Inertia传递给前端
   在控制器中调用函数，将结果作为props传给Vue组件：

use Inertia\Inertia;

class DemoController extends Controller
{
    public function index()
    {
        $targetNumber = 300;
        return Inertia::render('DemoPage', [
            'numberInWords' => numberToEnglish($targetNumber),
        ]);
    }
}

方案2：自定义轻量转换函数 #

若不想引入第三方包，可实现支持常用范围的转换逻辑：

function numberToEnglish(int $num): string
{
    $ones = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine',
             'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen',
             'seventeen', 'eighteen', 'nineteen'];
    $tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
    $hundreds = ['', 'one hundred', 'two hundred', 'three hundred', 'four hundred', 
                 'five hundred', 'six hundred', 'seven hundred', 'eight hundred', 'nine hundred'];

    if ($num < 20) return $ones[$num];
    
    if ($num < 100) {
        $ten = floor($num / 10);
        $remainder = $num % 10;
        return $tens[$ten] . ($remainder ? ' ' . $ones[$remainder] : '');
    }

    if ($num < 1000) {
        $hundred = floor($num / 100);
        $remainder = $num % 100;
        return $hundreds[$hundred] . ($remainder ? ' ' . numberToEnglish($remainder) : '');
    }

    // 可按需扩展千、百万等更大数字的转换逻辑
    return 'number out of range';
}

前端（Vue3）实现 #

方案1：使用前端库 #

安装num-words库实现快速转换：

npm install num-words

在Vue组件中直接使用：

<script setup>
import numWords from 'num-words';

const targetNumber = 300;
const numberInWords = numWords(targetNumber); // 返回 "three hundred"
</script>

<template>
  <p>{{ numberInWords }}</p>
</template>

方案2：自定义全局过滤器 #

在resources/js/app.js中注册全局过滤器：

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';

createInertiaApp({
  resolve: name => require(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
      .use(plugin)
      .filter('numberToEnglish', (num) => {
        const ones = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine',
                     'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen',
                     'seventeen', 'eighteen', 'nineteen'];
        const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
        const hundreds = ['', 'one hundred', 'two hundred', 'three hundred', 'four hundred', 
                         'five hundred', 'six hundred', 'seven hundred', 'eight hundred', 'nine hundred'];

        if (num < 20) return ones[num];
        if (num < 100) {
          const ten = Math.floor(num / 10);
          const remainder = num % 10;
          return tens[ten] + (remainder ? ' ' + ones[remainder] : '');
        }
        if (num < 1000) {
          const hundred = Math.floor(num / 100);
          const remainder = num % 100;
          return hundreds[hundred] + (remainder ? ' ' + app.config.globalProperties.$filters.numberToEnglish(remainder) : '');
        }
        return 'number out of range';
      });

    app.mount(el);
  },
});

在组件中通过过滤器使用：

<template>
  <p>{{ 300 | numberToEnglish }}</p> <!-- 显示 "three hundred" -->
</template>

结合Inertia的最佳实践 #

• 若数字涉及业务逻辑或需多页面复用，优先选择后端处理，通过Inertia props传递结果，保证数据一致性。
• 若仅需前端实时转换（如用户输入即时展示），使用前端方案更高效。

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